refactor: icons using ui lib svgs, closes leather-io/issues#123

leather-io · Aug 27, 2024 · 3e8314e · 3e8314e
1 parent 6987609
commit 3e8314e
Show file tree

Hide file tree

Showing 43 changed files with 1,424 additions and 1,290 deletions.
diff --git a/package.json b/package.json
@@ -137,15 +137,15 @@
     "@coinbase/cbpay-js": "2.1.0",
     "@fungible-systems/zone-file": "2.0.0",
     "@hirosystems/token-metadata-api-client": "1.2.0",
-    "@leather.io/bitcoin": "0.11.1",
+    "@leather.io/bitcoin": "0.11.2",
     "@leather.io/constants": "0.9.1",
-    "@leather.io/crypto": "1.4.1",
-    "@leather.io/models": "0.12.1",
-    "@leather.io/query": "2.6.1",
-    "@leather.io/stacks": "1.0.1",
-    "@leather.io/tokens": "0.8.1",
-    "@leather.io/ui": "1.13.0",
-    "@leather.io/utils": "0.13.1",
+    "@leather.io/crypto": "1.4.2",
+    "@leather.io/models": "0.13.0",
+    "@leather.io/query": "2.7.0",
+    "@leather.io/stacks": "1.0.2",
+    "@leather.io/tokens": "0.9.0",
+    "@leather.io/ui": "1.14.2",
+    "@leather.io/utils": "0.13.2",
     "@ledgerhq/hw-transport-webusb": "6.27.19",
     "@noble/hashes": "1.4.0",
     "@noble/secp256k1": "2.1.0",
@@ -255,9 +255,9 @@
     "@btckit/types": "0.0.19",
     "@chromatic-com/storybook": "1.2.23",
     "@leather.io/eslint-config": "0.7.0",
-    "@leather.io/panda-preset": "0.3.7",
+    "@leather.io/panda-preset": "0.3.8",
     "@leather.io/prettier-config": "0.6.0",
-    "@leather.io/rpc": "2.1.5",
+    "@leather.io/rpc": "2.1.6",
     "@ls-lint/ls-lint": "2.2.3",
     "@mdx-js/loader": "3.0.0",
     "@pandacss/dev": "0.40.1",
@@ -281,6 +281,7 @@
     "@storybook/react-webpack5": "8.2.4",
     "@storybook/test": "8.2.4",
     "@storybook/theming": "8.2.4",
+    "@svgr/webpack": "8.1.0",
     "@types/argon2-browser": "1.18.4",
     "@types/bn.js": "5.1.5",
     "@types/chrome": "0.0.260",
@@ -343,7 +344,6 @@
     "speed-measure-webpack-plugin": "1.5.0",
     "storybook": "8.2.4",
     "stream-browserify": "3.0.0",
-    "svg-url-loader": "8.0.0",
     "ts-node": "10.9.2",
     "ts-unused-exports": "10.0.1",
     "tsconfig-paths-webpack-plugin": "4.1.0",

diff --git a/panda.config.ts b/panda.config.ts
@@ -5,7 +5,7 @@ import { globalCss } from './theme/global/global';
 export default defineConfig({
   preflight: true,
   include: [
-    './node_modules/@leather.io/ui/dist-all/src/**/*.{js,jsx,ts,tsx}',
+    './node_modules/@leather.io/ui/dist-web/src/**/*.{js,jsx,ts,tsx}',
     './src/**/*.{js,jsx,ts,tsx}',
   ],
 

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/components/bitcoin-transaction-item/bitcoin-transaction-icon.tsx b/src/app/components/bitcoin-transaction-item/bitcoin-transaction-icon.tsx
@@ -7,8 +7,9 @@ import { isBitcoinTxInbound } from '@app/common/transactions/bitcoin/utils';
 
 function TxStatusIcon(props: { address: string; tx: BitcoinTx }) {
   const { address, tx } = props;
-  if (isBitcoinTxInbound(address, tx)) return <ArrowDownIcon variant="small" />;
-  return <ArrowUpIcon variant="small" />;
+  if (isBitcoinTxInbound(address, tx))
+    return <ArrowDownIcon color="ink.background-primary" variant="small" />;
+  return <ArrowUpIcon color="ink.background-primary" variant="small" />;
 }
 
 interface TransactionIconProps extends CircleProps {

diff --git a/src/app/components/stacks-transaction-item/stacks-transaction-icon.tsx b/src/app/components/stacks-transaction-item/stacks-transaction-icon.tsx
@@ -1,7 +1,7 @@
 import { BoxProps } from 'leather-styles/jsx';
 
 import { StacksTx } from '@leather.io/models';
-import { DynamicColorCircle, ErrorCircleIcon, ListIcon, StxAvatarIcon } from '@leather.io/ui';
+import { BarsThreeIcon, DynamicColorCircle, ErrorCircleIcon, StxAvatarIcon } from '@leather.io/ui';
 
 import { TransactionIconWrapper } from '../transaction/transaction-icon-wrapper';
 import { TransactionTypeIcon } from '../transaction/transaction-type-icon';
@@ -12,7 +12,9 @@ interface TransactionIconProps extends BoxProps {
 export function StacksTransactionIcon({ transaction, ...rest }: TransactionIconProps) {
   switch (transaction.tx_type) {
     case 'coinbase':
-      return <TransactionIconWrapper icon={<ListIcon />} transaction={transaction} {...rest} />;
+      return (
+        <TransactionIconWrapper icon={<BarsThreeIcon />} transaction={transaction} {...rest} />
+      );
     case 'smart_contract':
       return (
         <DynamicColorCircle value={`${transaction.smart_contract.contract_id}`} {...rest}>

diff --git a/src/app/components/transaction/token-transfer-icon.tsx b/src/app/components/transaction/token-transfer-icon.tsx
@@ -8,7 +8,7 @@ export function TokenTransferIcon(props: { tx: StacksTx }) {
   const currentAccountStxAddress = useCurrentStacksAccountAddress();
   const isSent = tx.sender_address === currentAccountStxAddress;
 
-  if (isSent) return <ArrowUpIcon variant="small" />;
+  if (isSent) return <ArrowUpIcon color="ink.background-primary" variant="small" />;
 
-  return <ArrowDownIcon variant="small" />;
+  return <ArrowDownIcon color="ink.background-primary" variant="small" />;
 }
diff --git a/src/app/components/transaction/transaction-icon.tsx b/src/app/components/transaction/transaction-icon.tsx
@@ -8,13 +8,13 @@ export function TransactionIcon(props: { tx: StacksTx }) {
 
   switch (tx.tx_type) {
     case 'coinbase':
-      return <PlusIcon variant="small" />;
+      return <PlusIcon color="ink.background-primary" variant="small" />;
     case 'smart_contract':
-      return <CodeIcon variant="small" />;
+      return <CodeIcon color="ink.background-primary" variant="small" />;
     case 'token_transfer':
       return <TokenTransferIcon tx={tx} />;
     case 'contract_call':
-      return <FunctionIcon />;
+      return <FunctionIcon color="ink.background-primary" variant="small" />;
     default:
       return null;
   }

diff --git a/...eatures/activity-list/components/transaction-list/stacks-transaction/ft-transfer-item.tsx b/...eatures/activity-list/components/transaction-list/stacks-transaction/ft-transfer-item.tsx
@@ -45,7 +45,11 @@ export function FtTransferItem({ ftTransfer, parentTx }: FtTransferItemProps) {
     assetMetadata.image_canonical_uri &&
     assetMetadata.name &&
     getSafeImageCanonicalUri(assetMetadata.image_canonical_uri, assetMetadata.name);
-  const icon = isOriginator ? <ArrowUpIcon variant="small" /> : <ArrowDownIcon variant="small" />;
+  const icon = isOriginator ? (
+    <ArrowUpIcon color="ink.background-primary" variant="small" />
+  ) : (
+    <ArrowDownIcon color="ink.background-primary" variant="small" />
+  );
   const title = `${assetMetadata.name || 'Token'} Transfer`;
   const value = `${isOriginator ? '-' : ''}${displayAmount.toFormat()}`;
   const transferIcon = ftImageCanonicalUri ? (

diff --git a/...atures/activity-list/components/transaction-list/stacks-transaction/stx-transfer-item.tsx b/...atures/activity-list/components/transaction-list/stacks-transaction/stx-transfer-item.tsx
@@ -19,7 +19,11 @@ export function StxTransferItem({ stxTransfer, parentTx }: StxTransferItemProps)
   const isOriginator = stxTransfer.sender === currentAccount?.address;
 
   const caption = getTxCaption(parentTx.tx) ?? '';
-  const icon = isOriginator ? <ArrowUpIcon variant="small" /> : <ArrowDownIcon variant="small" />;
+  const icon = isOriginator ? (
+    <ArrowUpIcon color="ink.background-primary" variant="small" />
+  ) : (
+    <ArrowDownIcon color="ink.background-primary" variant="small" />
+  );
   const title = 'Stacks Token Transfer';
   const value = `${isOriginator ? '-' : ''}${stacksValue({
     value: stxTransfer.amount,

diff --git a/src/app/features/collectibles/components/_collectible-types/collectible-audio.tsx b/src/app/features/collectibles/components/_collectible-types/collectible-audio.tsx
@@ -12,7 +12,7 @@ export function CollectibleAudio({ icon, ...props }: CollectibleAudioProps) {
   return (
     <CollectibleItemLayout collectibleTypeIcon={icon} {...props}>
       <CollectiblePlaceholderLayout>
-        <HeadsetIcon width="xl" />
+        <HeadsetIcon height={36} width={36} />
       </CollectiblePlaceholderLayout>
     </CollectibleItemLayout>
   );

diff --git a/src/app/features/collectibles/components/add-collectible.tsx b/src/app/features/collectibles/components/add-collectible.tsx
@@ -26,7 +26,7 @@ export function AddCollectible() {
       subtitle="Collectible"
       title="Add new"
     >
-      <PlusIcon height="auto" width="xl" />
+      <PlusIcon height={36} width={36} />
     </CollectibleItemLayout>
   );
 }
diff --git a/src/app/features/collectibles/components/collectible.layout.tsx b/src/app/features/collectibles/components/collectible.layout.tsx
@@ -1,7 +1,7 @@
 import { Flex, Grid, HStack, styled } from 'leather-styles/jsx';
 import { token } from 'leather-styles/tokens';
 
-import { RefreshIcon, Spinner } from '@leather.io/ui';
+import { ArrowRotateRightLeftIcon, Spinner } from '@leather.io/ui';
 
 import { LoadingSpinner } from '@app/components/loading-spinner';
 
@@ -31,7 +31,11 @@ export function CollectiblesLayout({
           {isLoading ? (
             <Spinner color={token('colors.ink.text-primary')} opacity={0.5} />
           ) : (
-            <RefreshIcon cursor="pointer" onClick={() => onRefresh()} variant="small" />
+            <ArrowRotateRightLeftIcon
+              cursor="pointer"
+              onClick={() => onRefresh()}
+              variant="small"
+            />
           )}
         </HStack>
         {subHeader}

diff --git a/src/app/features/collectibles/components/image-unavailable.tsx b/src/app/features/collectibles/components/image-unavailable.tsx
@@ -1,13 +1,13 @@
 import { styled } from 'leather-styles/jsx';
 
-import { EyeSlashIcon } from '@leather.io/ui';
+import { Eye1ClosedIcon } from '@leather.io/ui';
 
 import { CollectiblePlaceholderLayout } from './_collectible-types/collectible-placeholder.layout';
 
 export function ImageUnavailable() {
   return (
     <CollectiblePlaceholderLayout>
-      <EyeSlashIcon />
+      <Eye1ClosedIcon />
       <styled.span pt="space.02" px="space.04" textStyle="label.03">
         Image currently unavailable
       </styled.span>

diff --git a/src/app/features/container/headers/home.header.tsx b/src/app/features/container/headers/home.header.tsx
@@ -2,7 +2,7 @@ import { useOutletContext } from 'react-router-dom';
 
 import { SettingsSelectors } from '@tests/selectors/settings.selectors';
 
-import { HamburgerIcon } from '@leather.io/ui';
+import { BarsTwoIcon } from '@leather.io/ui';
 
 import { SwitchAccountOutletContext } from '@shared/switch-account';
 
@@ -22,7 +22,7 @@ export function HomeHeader() {
         rightCol={
           <HeaderGridRightCol>
             <Settings
-              triggerButton={<HamburgerIcon data-testid={SettingsSelectors.SettingsMenuBtn} />}
+              triggerButton={<BarsTwoIcon data-testid={SettingsSelectors.SettingsMenuBtn} />}
               toggleSwitchAccount={() => setIsShowingSwitchAccount(!isShowingSwitchAccount)}
             />
           </HeaderGridRightCol>

diff --git a/src/app/features/container/headers/onboarding.header.tsx b/src/app/features/container/headers/onboarding.header.tsx
@@ -3,7 +3,7 @@ import { useNavigate, useOutletContext } from 'react-router-dom';
 import { SettingsSelectors } from '@tests/selectors/settings.selectors';
 import { SharedComponentsSelectors } from '@tests/selectors/shared-component.selectors';
 
-import { ArrowLeftIcon, HamburgerIcon } from '@leather.io/ui';
+import { ArrowLeftIcon, BarsTwoIcon } from '@leather.io/ui';
 
 import { RouteUrls } from '@shared/route-urls';
 import { SwitchAccountOutletContext } from '@shared/switch-account';
@@ -40,7 +40,7 @@ export function OnboardingHeader({ hideLogo = false }: OnboardingHeaderProps) {
           rightCol={
             <HeaderGridRightCol>
               <Settings
-                triggerButton={<HamburgerIcon data-testid={SettingsSelectors.SettingsMenuBtn} />}
+                triggerButton={<BarsTwoIcon data-testid={SettingsSelectors.SettingsMenuBtn} />}
                 toggleSwitchAccount={() => setIsShowingSwitchAccount(!isShowingSwitchAccount)}
               />
             </HeaderGridRightCol>

diff --git a/src/app/features/container/headers/page.header.tsx b/src/app/features/container/headers/page.header.tsx
@@ -4,7 +4,7 @@ import { SettingsSelectors } from '@tests/selectors/settings.selectors';
 import { SharedComponentsSelectors } from '@tests/selectors/shared-component.selectors';
 import { styled } from 'leather-styles/jsx';
 
-import { ArrowLeftIcon, CloseIcon, HamburgerIcon } from '@leather.io/ui';
+import { ArrowLeftIcon, BarsTwoIcon, CloseIcon } from '@leather.io/ui';
 
 import { RouteUrls } from '@shared/route-urls';
 import { SwitchAccountOutletContext } from '@shared/switch-account';
@@ -64,7 +64,7 @@ export function PageHeader({
             ) : (
               <styled.div hideBelow={isSettingsVisibleOnSm ? undefined : 'sm'}>
                 <Settings
-                  triggerButton={<HamburgerIcon data-testid={SettingsSelectors.SettingsMenuBtn} />}
+                  triggerButton={<BarsTwoIcon data-testid={SettingsSelectors.SettingsMenuBtn} />}
                   toggleSwitchAccount={() => setIsShowingSwitchAccount(!isShowingSwitchAccount)}
                 />
               </styled.div>

diff --git a/src/app/features/container/headers/unlock.header.tsx b/src/app/features/container/headers/unlock.header.tsx
@@ -2,7 +2,7 @@ import { useNavigate } from 'react-router-dom';
 
 import { SettingsSelectors } from '@tests/selectors/settings.selectors';
 
-import { HamburgerIcon } from '@leather.io/ui';
+import { BarsTwoIcon } from '@leather.io/ui';
 
 import { RouteUrls } from '@shared/route-urls';
 
@@ -24,7 +24,7 @@ export function UnlockHeader() {
           <HeaderGridRightCol>
             <Settings
               canLockWallet={false}
-              triggerButton={<HamburgerIcon data-testid={SettingsSelectors.SettingsMenuBtn} />}
+              triggerButton={<BarsTwoIcon data-testid={SettingsSelectors.SettingsMenuBtn} />}
             />
           </HeaderGridRightCol>
         }

diff --git a/src/app/features/feedback-button/feedback-button.tsx b/src/app/features/feedback-button/feedback-button.tsx
@@ -1,4 +1,4 @@
-import { Flex } from 'leather-styles/jsx';
+import { Box, Flex } from 'leather-styles/jsx';
 
 import { Button, MegaphoneIcon } from '@leather.io/ui';
 
@@ -42,7 +42,9 @@ export function FeedbackButton() {
       onClick={openFeedbackDialog}
     >
       <Flex>
-        <MegaphoneIcon mr="space.01" mt="2px" variant="small" />
+        <Box mr="space.01" mt="2px">
+          <MegaphoneIcon variant="small" />
+        </Box>
         Give feedback
       </Flex>
     </Button>

diff --git a/src/app/features/ledger/components/ledger-screen-detail.tsx b/src/app/features/ledger/components/ledger-screen-detail.tsx
@@ -1,4 +1,4 @@
-import { Flex, styled } from 'leather-styles/jsx';
+import { Box, Flex, styled } from 'leather-styles/jsx';
 
 import { Caption, InfoCircleIcon } from '@leather.io/ui';
 
@@ -19,12 +19,9 @@ export function LedgerScreenDetail(props: LedgerScreenDetailProps) {
           <BasicTooltip label={tooltipLabel} side="top">
             <Flex cursor="question" display="inline-flex">
               {title}
-              <InfoCircleIcon
-                color="ink.text-subdued"
-                ml="space.01"
-                mt="space.01"
-                variant="small"
-              />
+              <Box ml="space.01" mt="space.01">
+                <InfoCircleIcon color="ink.text-subdued" variant="small" />
+              </Box>
             </Flex>
           </BasicTooltip>
         ) : (

diff --git a/src/app/features/ledger/generic-steps/connect-device/connect-ledger.tsx b/src/app/features/ledger/generic-steps/connect-device/connect-ledger.tsx
@@ -78,7 +78,7 @@ export function ConnectLedger(props: ConnectLedgerProps) {
               aria-busy={awaitingLedgerConnection}
             >
               <HStack gap="space.01">
-                <BitcoinIcon width="md" />
+                <BitcoinIcon color="ink.background-primary" />
                 <styled.span textStyle="label.02">Connect Bitcoin</styled.span>
               </HStack>
             </Button>
@@ -91,7 +91,7 @@ export function ConnectLedger(props: ConnectLedgerProps) {
               alignItems="center"
             >
               <HStack gap="space.01">
-                <StacksIcon width="md" />
+                <StacksIcon color="ink.background-primary" />
                 <styled.span textStyle="label.02">Connect Stacks</styled.span>
               </HStack>
             </Button>

diff --git a/src/app/features/settings/components/ledger-item-row.tsx b/src/app/features/settings/components/ledger-item-row.tsx
@@ -1,4 +1,4 @@
-import { Flex, styled } from 'leather-styles/jsx';
+import { Box, Flex, styled } from 'leather-styles/jsx';
 
 import { LedgerIcon } from '@leather.io/ui';
 
@@ -11,7 +11,9 @@ export function LedgerDeviceItemRow({ deviceType }: LedgerDeviceItemRowProps) {
   return (
     <>
       <Flex my="space.03" mb="space.04" mx="space.04" fontSize="14px" alignItems="center">
-        <LedgerIcon mr="space.03" />
+        <Box mr="space.03">
+          <LedgerIcon />
+        </Box>
         <styled.span cursor="default">Ledger {deviceType ?? ''}</styled.span>
       </Flex>
       <Divider />

diff --git a/src/app/features/settings/network/components/network-list-item-menu.tsx b/src/app/features/settings/network/components/network-list-item-menu.tsx
@@ -2,7 +2,7 @@ import { SettingsSelectors } from '@tests/selectors/settings.selectors';
 import { css } from 'leather-styles/css';
 import { HStack, styled } from 'leather-styles/jsx';
 
-import { DotsVerticalIcon, DropdownMenu, PenIcon, TrashIcon } from '@leather.io/ui';
+import { DropdownMenu, EllipsisVIcon, PencilIcon, TrashIcon } from '@leather.io/ui';
 
 interface Props {
   onEditNetwork(): void;
@@ -13,10 +13,7 @@ export function NetworkItemMenu({ onClickDeleteNetwork, onEditNetwork }: Props)
   return (
     <DropdownMenu.Root>
       <DropdownMenu.IconButton>
-        <DotsVerticalIcon
-          color="ink.text-primary"
-          data-testid={SettingsSelectors.SettingsMenuBtn}
-        />
+        <EllipsisVIcon color="ink.text-primary" data-testid={SettingsSelectors.SettingsMenuBtn} />
       </DropdownMenu.IconButton>
       <DropdownMenu.Portal>
         <DropdownMenu.Content
@@ -35,7 +32,7 @@ export function NetworkItemMenu({ onClickDeleteNetwork, onEditNetwork }: Props)
               }}
             >
               <HStack>
-                <PenIcon />
+                <PencilIcon />
                 <styled.span textStyle="label.02">Edit</styled.span>
               </HStack>
             </DropdownMenu.Item>