refactor: icon tokens

leather-io · Nov 22, 2023 · 91403d7 · 91403d7
1 parent fbc6580
commit 91403d7
Show file tree

Hide file tree

Showing 61 changed files with 74 additions and 133 deletions.
diff --git a/src/app/components/available-balance.tsx b/src/app/components/available-balance.tsx
@@ -1,5 +1,4 @@
 import { Box, Flex, HStack, styled } from 'leather-styles/jsx';
-import { token } from 'leather-styles/tokens';
 
 import { Money } from '@shared/models/money.model';
 
@@ -21,7 +20,7 @@ export function AvailableBalance(props: { balance: Money; balanceTooltipLabel?:
         </styled.span>
         <Tooltip label={balanceTooltipLabel} placement="top">
           <Box>
-            <InfoIcon color="accent.text-subdued" size={token('icons.icon.xs')} />
+            <InfoIcon color="accent.text-subdued" size="xs" />
           </Box>
         </Tooltip>
       </HStack>

diff --git a/src/app/components/bitcoin-transaction-item/bitcoin-transaction-icon.tsx b/src/app/components/bitcoin-transaction-item/bitcoin-transaction-icon.tsx
@@ -10,8 +10,8 @@ import { BtcIcon } from '@app/ui/components/icons/btc-icon';
 
 export function TxStatusIcon(props: { address: string; tx: BitcoinTx }) {
   const { address, tx } = props;
-  if (isBitcoinTxInbound(address, tx)) return <ArrowDownIcon size={token('icons.icon.xs')} />;
-  return <ArrowUpIcon size={token('icons.icon.xs')} />;
+  if (isBitcoinTxInbound(address, tx)) return <ArrowDownIcon size="xs" />;
+  return <ArrowUpIcon size="xs" />;
 }
 
 interface TransactionIconProps extends CircleProps {

diff --git a/...crypto-assets/bitcoin/brc20-token-asset-list/components/brc20-token-asset-item.layout.tsx b/...crypto-assets/bitcoin/brc20-token-asset-list/components/brc20-token-asset-item.layout.tsx
@@ -1,4 +1,5 @@
 import { BoxProps, Flex, HStack, styled } from 'leather-styles/jsx';
+import { token } from 'leather-styles/tokens';
 
 import type { Money } from '@shared/models/money.model';
 
@@ -13,21 +14,22 @@ interface Brc20TokenAssetItemLayoutProps extends BoxProps {
   balance: Money;
   caption: string;
   isPressable?: boolean;
+  onClick?(): void;
   title: string;
 }
 export function Brc20TokenAssetItemLayout({
   balance,
   caption,
   isPressable,
+  onClick,
   title,
 }: Brc20TokenAssetItemLayoutProps) {
   const [component, bind] = usePressable(isPressable);
 
   const formattedBalance = formatBalance(balance.amount.toString());
 
   return (
-    // #4476 TODO not sure why this isn't erroring
-    <Flex as={isPressable ? 'button' : 'div'} outline={0} {...(bind as any)}>
+    <Flex onClick={isPressable ? onClick : undefined} {...bind}>
       <Flag align="middle" img={<Brc20TokenIcon />} spacing="space.04" width="100%">
         <HStack alignItems="center" justifyContent="space-between" width="100%">
           <styled.span

diff --git a/...onents/crypto-assets/bitcoin/brc20-token-asset-list/components/brc20-token-asset-item.tsx b/...onents/crypto-assets/bitcoin/brc20-token-asset-list/components/brc20-token-asset-item.tsx
@@ -16,7 +16,7 @@ export function Brc20TokenAssetItem({ token, isPressable, onClick }: Brc20TokenA
       caption="BRC-20"
       title={token.tick}
       isPressable={isPressable}
-      onClick={onClick} // #4383 TODO - check this works
+      onClick={onClick}
     />
   );
 }
diff --git a/src/app/components/crypto-assets/components/asset-caption.tsx b/src/app/components/crypto-assets/components/asset-caption.tsx
@@ -23,7 +23,7 @@ export function AssetCaption({ caption, isUnanchored }: AssetCaptionProps) {
                 target="_blank"
                 rel="noreferrer"
               >
-                <InfoIcon size="icon.xs" ml="space.01" color="accent.text-subdued" />
+                <InfoIcon color="accent.text-subdued" ml="space.01" size="xs" />
               </a>
             </HStack>
           </Tooltip>

diff --git a/src/app/components/fees-row/components/fees-row.layout.tsx b/src/app/components/fees-row/components/fees-row.layout.tsx
@@ -32,11 +32,7 @@ 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={token('icons.icon.xs')}
-              />
+              <InfoIcon color="accent.text-subdued" onClick={() => openInNewTab(url)} size="xs" />
             </HStack>
           </Tooltip>
           {!isSponsored ? selectInput : null}

diff --git a/src/app/components/sponsored-label.tsx b/src/app/components/sponsored-label.tsx
@@ -13,7 +13,7 @@ export function SponsoredLabel(): React.JSX.Element {
         height="48px"
         pl="space.04"
       >
-        <ErrorCircleIcon color="stacks" size="icon.sm" />
+        <ErrorCircleIcon color="stacks" size="sm" />
 
         <styled.span color="accent.text-primary">
           This transaction is sponsored, so no fee is charged

diff --git a/src/app/components/transaction/token-transfer-icon.tsx b/src/app/components/transaction/token-transfer-icon.tsx
@@ -1,5 +1,3 @@
-import { token } from 'leather-styles/tokens';
-
 import { StacksTx } from '@shared/models/transactions/stacks-transaction.model';
 
 import { useCurrentAccountStxAddressState } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks';
@@ -20,11 +18,10 @@ export function TokenTransferIcon(props: { tx: StacksTx }) {
         bg={getColorFromTx(tx)}
         borderColor="currentColor"
         fill="accent.background-primary"
-        size={token('icons.icon.xs')}
       />
     );
 
-  if (isSent) return <ArrowUpIcon size={token('icons.icon.xs')} />;
+  if (isSent) return <ArrowUpIcon size="xs" />;
 
-  return <ArrowDownIcon size={token('icons.icon.xs')} />;
+  return <ArrowDownIcon size="xs" />;
 }
diff --git a/src/app/components/transaction/transaction-icon.tsx b/src/app/components/transaction/transaction-icon.tsx
@@ -13,13 +13,13 @@ export function TransactionIcon(props: { tx: StacksTx }) {
 
   switch (tx.tx_type) {
     case 'coinbase':
-      return <PlusIcon size={token('icons.icon.xs')} />;
+      return <PlusIcon size="xs" />;
     case 'smart_contract':
-      return <CodeIcon size={token('icons.icon.xs')} />;
+      return <CodeIcon size="xs" />;
     case 'token_transfer':
       return <TokenTransferIcon tx={tx} />;
     case 'contract_call':
-      return <FunctionIcon size={token('icons.icon.xs')} />;
+      return <FunctionIcon size={token('sizes.xs')} />;
     case 'poison_microblock':
       return null;
     default:

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
@@ -50,11 +50,7 @@ export function FtTransferItem({ ftTransfer, parentTx }: FtTransferItemProps) {
     assetMetadata.image_canonical_uri &&
     assetMetadata.name &&
     getImageCanonicalUri(assetMetadata.image_canonical_uri, assetMetadata.name);
-  const icon = isOriginator ? (
-    <ArrowUpIcon size={token('icons.icon.xs')} />
-  ) : (
-    <ArrowDownIcon size={token('icons.icon.xs')} />
-  );
+  const icon = isOriginator ? <ArrowUpIcon size="xs" /> : <ArrowDownIcon size="xs" />;
   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
@@ -24,11 +24,7 @@ export function StxTransferItem({ stxTransfer, parentTx }: StxTransferItemProps)
   const isOriginator = stxTransfer.sender === currentAccount?.address;
 
   const caption = getTxCaption(parentTx.tx) ?? '';
-  const icon = isOriginator ? (
-    <ArrowUpIcon size={token('icons.icon.xs')} />
-  ) : (
-    <ArrowDownIcon size={token('icons.icon.xs')} />
-  );
+  const icon = isOriginator ? <ArrowUpIcon size="xs" /> : <ArrowDownIcon size="xs" />;
   const title = 'Stacks Token Transfer';
   const value = `${isOriginator ? '-' : ''}${stacksValue({
     value: stxTransfer.amount,

diff --git a/src/app/features/collectibles/components/add-collectible.tsx b/src/app/features/collectibles/components/add-collectible.tsx
@@ -1,7 +1,5 @@
 import { useLocation, useNavigate } from 'react-router-dom';
 
-import { token } from 'leather-styles/tokens';
-
 import { RouteUrls } from '@shared/route-urls';
 
 import { useAnalytics } from '@app/common/hooks/analytics/use-analytics';
@@ -28,7 +26,7 @@ export function AddCollectible() {
       subtitle="Collectible"
       title="Add new"
     >
-      <PlusIcon size={token('icons.icon.xl')} />
+      <PlusIcon size="xl" />
     </CollectibleItemLayout>
   );
 }
diff --git a/src/app/features/collectibles/components/bitcoin/inscription.tsx b/src/app/features/collectibles/components/bitcoin/inscription.tsx
@@ -31,7 +31,7 @@ export function Inscription({ rawInscription }: InscriptionProps) {
     case 'image': {
       return (
         <CollectibleImage
-          icon={<OrdinalIcon size={token('icons.icon.lg')} />}
+          icon={<OrdinalIcon size="lg" />}
           key={inscription.title}
           onClickCallToAction={() => openInNewTab(inscription.infoUrl)}
           onClickSend={() => openSendInscriptionModal()}

diff --git a/src/app/features/collectibles/components/bitcoin/stamp.tsx b/src/app/features/collectibles/components/bitcoin/stamp.tsx
@@ -13,7 +13,7 @@ export function Stamp(props: { bitcoinStamp: BitcoinStamp }) {
 
   return (
     <CollectibleImage
-      icon={<StampsIcon size={token('icons.icon.lg')} />}
+      icon={<StampsIcon size="lg" />}
       key={bitcoinStamp.stamp}
       onClickCallToAction={() => openInNewTab(`${stampChainAssetUrl}${bitcoinStamp.stamp}`)}
       src={bitcoinStamp.stamp_url}

diff --git a/src/app/features/collectibles/components/image-unavailable.tsx b/src/app/features/collectibles/components/image-unavailable.tsx
@@ -1,5 +1,4 @@
 import { Flex, styled } from 'leather-styles/jsx';
-import { token } from 'leather-styles/tokens';
 
 import { EyeSlashIcon } from '@app/ui/components/icons/eye-slash-icon';
 
@@ -14,7 +13,7 @@ export function ImageUnavailable() {
       textAlign="center"
       width="100%"
     >
-      <EyeSlashIcon pb="12px" size={token('icons.icon.md')} />
+      <EyeSlashIcon pb="12px" size="md" />
       <styled.span textStyle="label.03">Image currently</styled.span>
       <styled.span textStyle="label.03">unavailable</styled.span>
     </Flex>

diff --git a/src/app/features/collectibles/components/stacks/stacks-bns-name.tsx b/src/app/features/collectibles/components/stacks/stacks-bns-name.tsx
@@ -10,7 +10,7 @@ export function StacksBnsName(props: { bnsName: string }) {
 
   return (
     <CollectibleItemLayout
-      collectibleTypeIcon={<StxIcon size={token('icons.icon.lg')} />}
+      collectibleTypeIcon={<StxIcon size="lg" />}
       subtitle="Bitcoin Naming System"
       title={bnsName}
     >

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
@@ -19,7 +19,7 @@ export function StacksNonFungibleTokens({ metadata }: StacksNonFungibleTokensPro
   return (
     <CollectibleImage
       alt="stacks nft"
-      icon={<StxIcon size={token('icons.icon.lg')} />}
+      icon={<StxIcon size="lg" />}
       src={metadata.cached_image ?? ''}
       subtitle="Stacks NFT"
       title={metadata.name ?? ''}

diff --git a/src/app/features/high-fee-drawer/high-fee-drawer.tsx b/src/app/features/high-fee-drawer/high-fee-drawer.tsx
@@ -18,7 +18,7 @@ export function HighFeeDrawer(props: { learnMoreUrl: string }) {
 
   return (
     <ControlledDrawer
-      icon={<ErrorIcon color="error.label" size="icon.xl" />}
+      icon={<ErrorIcon color="error.label" size="xl" />}
       isShowing={isShowingHighFeeConfirmation}
       onClose={() => setIsShowingHighFeeConfirmation(false)}
     >

diff --git a/src/app/features/increase-fee-drawer/increase-fee-sent-drawer.tsx b/src/app/features/increase-fee-drawer/increase-fee-sent-drawer.tsx
@@ -17,7 +17,7 @@ export function IncreaseFeeSentDrawer() {
     <>
       <BaseDrawer isShowing={isShowing} onClose={() => navigate(RouteUrls.Home)} title="Confirmed">
         <Flex justifyContent="center" pb="space.06" px="space.05">
-          <CheckmarkIcon mt="2px" size={token('icons.icon.lg')} />
+          <CheckmarkIcon mt="2px" size="lg" />
         </Flex>
       </BaseDrawer>
       <Outlet />

diff --git a/src/app/features/ledger/components/ledger-screen-detail.tsx b/src/app/features/ledger/components/ledger-screen-detail.tsx
@@ -23,7 +23,7 @@ export function LedgerScreenDetail(props: LedgerScreenDetailProps) {
               <InfoIcon
                 ml="space.01"
                 mt="space.01"
-                size={token('icons.icon.xs')}
+                size="xs"
                 style={{ color: token('colors.accent.text-subdued') }}
               />
             </Flex>

diff --git a/src/app/features/psbt-signer/components/psbt-request-details-header.tsx b/src/app/features/psbt-signer/components/psbt-request-details-header.tsx
@@ -35,9 +35,9 @@ export function PsbtRequestDetailsHeader() {
         >
           <Box width="12px">
             {isPsbtMutable ? (
-              <UnlockIcon style={{ color: tokenLabelColor }} size={token('icons.icon.xs')} />
+              <UnlockIcon style={{ color: tokenLabelColor }} size="xs" />
             ) : (
-              <LockIcon style={{ color: tokenLabelColor }} size={token('icons.icon.xs')} />
+              <LockIcon style={{ color: tokenLabelColor }} size="xs" />
             )}
           </Box>
           <styled.span

diff --git a/src/app/pages/choose-account/components/accounts.tsx b/src/app/pages/choose-account/components/accounts.tsx
@@ -88,11 +88,7 @@ const AddAccountAction = memo(() => {
   return (
     <Box mb="space.05" px="space.03" py="space.02" onClick={onCreateAccount} {...bind}>
       <HStack alignItems="center">
-        <PlusIcon size="16px" />
-        {/* 
-        #4476 TODO - test / refactor this - I'm not sure where it is or what it does 
-        We have a button instead for `Create new account'
-        */}
+        <PlusIcon />
         Generate new account
       </HStack>
       {component}

diff --git a/src/app/pages/swap/components/swap-toggle-button.tsx b/src/app/pages/swap/components/swap-toggle-button.tsx
@@ -44,7 +44,7 @@ export function SwapToggleButton() {
       onClick={onToggleSwapAssets}
       type="button"
     >
-      <SwapIcon transform="rotate(90)" />
+      <SwapIcon transform="rotate(90deg)" />
     </styled.button>
   );
 }
diff --git a/src/app/ui/components/icons/alert-octagon-icon.tsx b/src/app/ui/components/icons/alert-octagon-icon.tsx
@@ -1,9 +1,8 @@
 import { Square, SquareProps } from 'leather-styles/jsx';
-import { token } from 'leather-styles/tokens';
 
 import { Svg } from '@app/ui/components/svg';
 
-export function AlertOctagonIcon({ size = token('icons.icon.sm'), ...props }: SquareProps) {
+export function AlertOctagonIcon({ size = 'sm', ...props }: SquareProps) {
   return (
     <Square size={size} {...props}>
       <Svg

diff --git a/src/app/ui/components/icons/arrow-down-icon.tsx b/src/app/ui/components/icons/arrow-down-icon.tsx
@@ -1,9 +1,8 @@
 import { Square, SquareProps } from 'leather-styles/jsx';
-import { token } from 'leather-styles/tokens';
 
 import { Svg } from '@app/ui/components/svg';
 
-export function ArrowDownIcon({ size = token('icons.icon.sm'), ...props }: SquareProps) {
+export function ArrowDownIcon({ size = 'sm', ...props }: SquareProps) {
   return (
     <Square size={size} {...props}>
       <Svg

diff --git a/src/app/ui/components/icons/arrow-left-icon.tsx b/src/app/ui/components/icons/arrow-left-icon.tsx
@@ -1,9 +1,8 @@
 import { Square, SquareProps } from 'leather-styles/jsx';
-import { token } from 'leather-styles/tokens';
 
 import { Svg } from '../svg';
 
-export function ArrowLeftIcon({ size = token('icons.icon.sm'), ...props }: SquareProps) {
+export function ArrowLeftIcon({ size = 'sm', ...props }: SquareProps) {
   return (
     <Square size={size} {...props}>
       <Svg

diff --git a/src/app/ui/components/icons/arrow-up-icon.tsx b/src/app/ui/components/icons/arrow-up-icon.tsx
@@ -1,9 +1,8 @@
 import { Square, SquareProps } from 'leather-styles/jsx';
-import { token } from 'leather-styles/tokens';
 
 import { Svg } from '@app/ui/components/svg';
 
-export function ArrowUpIcon({ size = token('icons.icon.sm'), ...props }: SquareProps) {
+export function ArrowUpIcon({ size = 'sm', ...props }: SquareProps) {
   return (
     <Square size={size} {...props}>
       <Svg

diff --git a/src/app/ui/components/icons/bitcoin-contract-icon.tsx b/src/app/ui/components/icons/bitcoin-contract-icon.tsx
@@ -1,9 +1,8 @@
 import { Square, SquareProps } from 'leather-styles/jsx';
-import { token } from 'leather-styles/tokens';
 
 import { Svg } from '../svg';
 
-export function BitcoinContractIcon({ size = token('icons.icon.xl'), ...props }: SquareProps) {
+export function BitcoinContractIcon({ size = 'xl', ...props }: SquareProps) {
   return (
     <Square size={size} {...props}>
       <Svg

diff --git a/src/app/ui/components/icons/brc20-token-icon.tsx b/src/app/ui/components/icons/brc20-token-icon.tsx
@@ -1,11 +1,10 @@
 import { Square, SquareProps } from 'leather-styles/jsx';
-import { token } from 'leather-styles/tokens';
 
 import { Svg } from '../svg';
 
-export function Brc20TokenIcon({ size = token('icons.icon.xl'), ...props }: SquareProps) {
+export function Brc20TokenIcon({ size = 'xl', ...rest }: SquareProps) {
   return (
-    <Square size={size} {...props}>
+    <Square size={size} {...rest}>
       <Svg
         width="36"
         height="36"

diff --git a/src/app/ui/components/icons/btc-icon.tsx b/src/app/ui/components/icons/btc-icon.tsx
@@ -1,9 +1,8 @@
 import { Square, SquareProps } from 'leather-styles/jsx';
-import { token } from 'leather-styles/tokens';
 
 import { Svg } from '@app/ui/components/svg';
 
-export function BtcIcon({ size = token('icons.icon.xl'), ...props }: SquareProps) {
+export function BtcIcon({ size = 'xl', ...props }: SquareProps) {
   return (
     <Square size={size} {...props}>
       <Svg

diff --git a/src/app/ui/components/icons/btc-ledger-icon.tsx b/src/app/ui/components/icons/btc-ledger-icon.tsx
@@ -1,9 +1,8 @@
 import { Square, SquareProps } from 'leather-styles/jsx';
-import { token } from 'leather-styles/tokens';
 
 import { Svg } from '../svg';
 
-export function BtcLedgerIcon({ size = token('icons.icon.md'), ...props }: SquareProps) {
+export function BtcLedgerIcon({ size = 'md', ...props }: SquareProps) {
   return (
     <Square size={size} {...props}>
       <Svg

diff --git a/src/app/ui/components/icons/checkmark-icon.tsx b/src/app/ui/components/icons/checkmark-icon.tsx
@@ -1,9 +1,8 @@
 import { Square, SquareProps } from 'leather-styles/jsx';
-import { token } from 'leather-styles/tokens';
 
 import { Svg } from '@app/ui/components/svg';
 
-export function CheckmarkIcon({ size = token('icons.icon.sm'), ...props }: SquareProps) {
+export function CheckmarkIcon({ size = 'sm', ...props }: SquareProps) {
   return (
     <Square size={size} {...props}>
       <Svg