refactor: update button variants to link

leather-io · Jan 18, 2024 · bef41e4 · bef41e4
1 parent 3ef2e30
commit bef41e4
Show file tree

Hide file tree

Showing 23 changed files with 133 additions and 100 deletions.
diff --git a/package.json b/package.json
@@ -241,7 +241,6 @@
     "@actions/core": "1.10.1",
     "@btckit/types": "0.0.19",
     "@leather-wallet/prettier-config": "0.0.1",
-    "@leather-wallet/tokens": "0.0.4",
     "@ls-lint/ls-lint": "2.2.2",
     "@pandacss/dev": "0.26.2",
     "@playwright/test": "1.40.1",

diff --git a/src/app/components/bitcoin-custom-fee/bitcoin-custom-fee.tsx b/src/app/components/bitcoin-custom-fee/bitcoin-custom-fee.tsx
@@ -9,7 +9,7 @@ import { createMoney } from '@shared/models/money.model';
 
 import { openInNewTab } from '@app/common/utils/open-in-new-tab';
 import { PreviewButton } from '@app/components/preview-button';
-import { Button } from '@app/ui/components/button/button';
+import { Link } from '@app/ui/components/link/link';
 
 import { OnChooseFeeArgs } from '../bitcoin-fees-list/bitcoin-fees-list';
 import { TextInputField } from '../text-input-field';
@@ -89,14 +89,13 @@ export function BitcoinCustomFee({
               <Stack gap="space.05">
                 <styled.span color="accent.text-subdued" textStyle="body.02" maxWidth="21.5rem">
                   Higher fee rates typically lead to faster confirmation times.
-                  <Button
+                  <Link
                     ml="space.01"
                     onClick={() => openInNewTab('https://buybitcoinworldwide.com/fee-calculator/')}
                     textStyle="body.02"
-                    variant="link"
                   >
                     View fee calculator
-                  </Button>
+                  </Link>
                 </styled.span>
                 <Stack gap="space.01">
                   <TextInputField

diff --git a/src/app/components/disclaimer.tsx b/src/app/components/disclaimer.tsx
@@ -1,7 +1,7 @@
 import { Box, BoxProps, styled } from 'leather-styles/jsx';
 
 import { openInNewTab } from '@app/common/utils/open-in-new-tab';
-import { Button } from '@app/ui/components/button/button';
+import { Link } from '@app/ui/components/link/link';
 
 interface DisclaimerProps extends BoxProps {
   disclaimerText: string;
@@ -13,15 +13,10 @@ export function Disclaimer({ disclaimerText, learnMoreUrl, ...props }: Disclaime
       <styled.span textStyle="caption.02">
         {disclaimerText}
         {learnMoreUrl ? (
-          <Button
-            display="inline"
-            fontSize="14px"
-            onClick={() => openInNewTab(learnMoreUrl)}
-            variant="link"
-          >
+          <Link display="inline" fontSize="14px" onClick={() => openInNewTab(learnMoreUrl)}>
             {' '}
             Learn more
-          </Button>
+          </Link>
         ) : null}
         {learnMoreUrl ? '.' : null}
       </styled.span>

diff --git a/src/app/components/edit-nonce-button.tsx b/src/app/components/edit-nonce-button.tsx
@@ -1,12 +1,12 @@
-import { Button, ButtonProps } from '@app/ui/components/button/button';
+import { Link, LinkProps } from '@app/ui/components/link/link';
 
-interface EditNonceButtonProps extends ButtonProps {
+interface EditNonceButtonProps extends LinkProps {
   onEditNonce(): void;
 }
 export function EditNonceButton({ onEditNonce, ...props }: EditNonceButtonProps) {
   return (
-    <Button onClick={onEditNonce} textStyle="label.02" variant="link" {...props}>
+    <Link onClick={onEditNonce} {...props}>
       Edit nonce
-    </Button>
+    </Link>
   );
 }
diff --git a/src/app/components/fees-row/components/fee-estimate-item.tsx b/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 { Button } from '@app/ui/components/button/button';
 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';
 
 const labels = ['Low', 'Standard', 'High', 'Custom'];
 const testLabels = labels.map(label => label.toLowerCase());
@@ -29,7 +29,7 @@ export function FeeEstimateItem({
   }, [index, selectedItem]);
 
   return (
-    <Button
+    <Link
       _hover={{
         bg: isVisible ? 'accent.component-background-hover' : 'accent.background-primary',
         borderRadius: 'xs',
@@ -48,6 +48,6 @@ export function FeeEstimateItem({
         <styled.span textStyle="label.02">{labels[index]}</styled.span>
         {!disableFeeSelection && (isVisible ? selectedIcon : <ChevronDownIcon />)}
       </HStack>
-    </Button>
+    </Link>
   );
 }
diff --git a/src/app/components/generic-error/generic-error.layout.tsx b/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 { Button } from '@app/ui/components/button/button';
 import { ExternalLinkIcon } from '@app/ui/components/icons/external-link-icon';
+import { Link } from '@app/ui/components/link/link';
 
 const supportUrl =
   'https://wallet.hiro.so/wallet-faq/where-can-i-find-support-for-the-stacks-wallet';
@@ -58,9 +58,9 @@ export function GenericErrorLayout(props: GenericErrorProps) {
           </HStack>
         </styled.li>
       </styled.ul>
-      <Button fontSize="14px" mt="space.05" onClick={onClose} variant="link">
+      <Link fontSize="14px" mt="space.05" onClick={onClose}>
         Close window
-      </Button>
+      </Link>
     </Flex>
   );
 }
diff --git a/src/app/components/inscription-preview-card/components/inscription-metadata.tsx b/src/app/components/inscription-preview-card/components/inscription-metadata.tsx
@@ -1,6 +1,6 @@
 import { Flex, styled } from 'leather-styles/jsx';
 
-import { Button } from '@app/ui/components/button/button';
+import { Link } from '@app/ui/components/link/link';
 
 interface InscriptionMetadataProps {
   action?(): void;
@@ -22,9 +22,9 @@ export function InscriptionMetadata({
       <styled.span textStyle="label.01">{title}</styled.span>
       <styled.span textStyle="caption.02">{subtitle}</styled.span>
       {action ? (
-        <Button color="stacks" onClick={() => action()} textStyle="caption.02" variant="text">
+        <Link color="stacks" onClick={() => action()} textStyle="caption.02" variant="text">
           {actionLabel}
-        </Button>
+        </Link>
       ) : null}
     </Flex>
   );

diff --git a/src/app/components/leather-logo.tsx b/src/app/components/leather-logo.tsx
@@ -1,6 +1,7 @@
 import { memo } from 'react';
 
-import { Button } from '@app/ui/components/button/button';
+import { styled } from 'leather-styles/jsx';
+
 import { LeatherIcon } from '@app/ui/components/icons/leather-icon';
 
 interface LeatherLogoProps {
@@ -11,16 +12,16 @@ export const LeatherLogo = memo((props: LeatherLogoProps) => {
   const { isClickable, onClick } = props;
 
   return (
-    <Button
+    <styled.button
       _hover={{ color: 'accent.action-primary-hover' }}
       color="accent.text-primary"
       cursor={isClickable ? 'pointer' : 'unset'}
       height="16px"
       onClick={onClick}
-      variant="text"
+      type="button"
       width="76px"
     >
       <LeatherIcon />
-    </Button>
+    </styled.button>
   );
 });
diff --git a/src/app/components/text-input-field.tsx b/src/app/components/text-input-field.tsx
@@ -6,7 +6,7 @@ import { Box, Flex, FlexProps, HStack, styled } from 'leather-styles/jsx';
 
 import { useShowFieldError } from '@app/common/form-utils';
 import { capitalize } from '@app/common/utils';
-import { Button } from '@app/ui/components/button/button';
+import { Link } from '@app/ui/components/link/link';
 
 import { TextInputFieldError } from './field-error';
 
@@ -79,7 +79,7 @@ export function TextInputField({
             {topInputOverlay ? <Box zIndex={999}>{topInputOverlay}</Box> : null}
           </Flex>
           {labelAction ? (
-            <Button
+            <Link
               data-testid={SendCryptoAssetSelectors.RecipientChooseAccountButton}
               fontWeight={500}
               // Prevents focusing underlying input
@@ -92,12 +92,11 @@ export function TextInputField({
                 if (ref.current !== null && ref.current === document.activeElement)
                   ref.current.blur();
               }}
-              textStyle="label.02"
               variant="text"
               zIndex={999}
             >
               {labelAction}
-            </Button>
+            </Link>
           ) : null}
         </HStack>
         <styled.input

diff --git a/src/app/features/edit-nonce-drawer/edit-nonce-drawer.tsx b/src/app/features/edit-nonce-drawer/edit-nonce-drawer.tsx
@@ -9,7 +9,7 @@ import { StacksSendFormValues, StacksTransactionFormValues } from '@shared/model
 import { useOnMount } from '@app/common/hooks/use-on-mount';
 import { openInNewTab } from '@app/common/utils/open-in-new-tab';
 import { BaseDrawer } from '@app/components/drawer/base-drawer';
-import { Button } from '@app/ui/components/button/button';
+import { Link } from '@app/ui/components/link/link';
 
 import { EditNonceForm } from './components/edit-nonce-form';
 
@@ -19,9 +19,9 @@ function CustomFeeMessaging() {
   return (
     <styled.span textStyle="caption.01">
       If your transaction has been pending for a long time, its nonce might not be correct.
-      <Button fontSize="14px" ml="space.01" onClick={() => openInNewTab(url)} variant="link">
+      <Link fontSize="14px" ml="space.01" onClick={() => openInNewTab(url)}>
         Learn more.
-      </Button>
+      </Link>
     </styled.span>
   );
 }

diff --git a/src/app/features/high-fee-drawer/components/high-fee-confirmation.tsx b/src/app/features/high-fee-drawer/components/high-fee-confirmation.tsx
@@ -10,6 +10,7 @@ import {
 import { useDrawers } from '@app/common/hooks/use-drawers';
 import { openInNewTab } from '@app/common/utils/open-in-new-tab';
 import { Button } from '@app/ui/components/button/button';
+import { Link } from '@app/ui/components/link/link';
 import { Caption } from '@app/ui/components/typography/caption';
 import { Title } from '@app/ui/components/typography/title';
 
@@ -26,9 +27,9 @@ export function HighFeeConfirmation({ learnMoreUrl }: { learnMoreUrl: string })
       </Title>
       <Caption>
         This action cannot be undone and the fees won't be returned, even if the transaction fails.{' '}
-        <Button fontSize="14px" onClick={() => openInNewTab(learnMoreUrl)} variant="link">
+        <Link onClick={() => openInNewTab(learnMoreUrl)} size="sm">
           Learn more
-        </Button>
+        </Link>
       </Caption>
       <HStack mt="space.05">
         <Button

diff --git a/src/app/features/psbt-signer/components/psbt-request-details-section-header.tsx b/src/app/features/psbt-signer/components/psbt-request-details-section-header.tsx
@@ -1,7 +1,7 @@
 import { HStack, styled } from 'leather-styles/jsx';
 
-import { Button } from '@app/ui/components/button/button';
 import { ArrowUpIcon } from '@app/ui/components/icons/arrow-up-icon';
+import { Link } from '@app/ui/components/link/link';
 
 interface PsbtRequestDetailsSectionHeaderProps {
   hasDetails?: boolean;
@@ -19,15 +19,15 @@ export function PsbtRequestDetailsSectionHeader({
     <HStack alignItems="center" justifyContent="space-between">
       <styled.span textStyle="label.01">{title}</styled.span>
       {hasDetails && onSetShowDetails ? (
-        <Button onClick={() => onSetShowDetails(!showDetails)} variant="text">
+        <Link onClick={() => onSetShowDetails(!showDetails)} variant="text">
           {showDetails ? (
             <HStack gap="space.01">
               See less <ArrowUpIcon />
             </HStack>
           ) : (
             'See details'
           )}
-        </Button>
+        </Link>
       ) : null}
     </HStack>
   );

diff --git a/src/app/features/settings-dropdown/components/settings-menu-item.tsx b/src/app/features/settings-dropdown/components/settings-menu-item.tsx
@@ -1,15 +1,15 @@
 import { ReactNode } from 'react';
 
-import { Button, ButtonProps } from '@app/ui/components/button/button';
+import { Link, LinkProps } from '@app/ui/components/link/link';
 
-interface SettingsMenuItemProps extends ButtonProps {
+interface SettingsMenuItemProps extends LinkProps {
   color?: string;
   onClick(e: React.MouseEvent): void;
   children: ReactNode;
 }
 export function SettingsMenuItem({ color, onClick, children, ...props }: SettingsMenuItemProps) {
   return (
-    <Button
+    <Link
       _hover={{ bg: 'accent.component-background-hover' }}
       borderRadius="0px"
       color={color ? color : 'accent.text-primary'}
@@ -18,12 +18,11 @@ export function SettingsMenuItem({ color, onClick, children, ...props }: Setting
       onClick={e => {
         onClick?.(e);
       }}
-      textStyle="label.02"
       variant="text"
       width="100%"
       {...props}
     >
       {children}
-    </Button>
+    </Link>
   );
 }
diff --git a/src/app/features/stacks-transaction-request/principal-value.tsx b/src/app/features/stacks-transaction-request/principal-value.tsx
@@ -1,6 +1,6 @@
 import { openInNewTab } from '@app/common/utils/open-in-new-tab';
 import { useCurrentNetworkState } from '@app/store/networks/networks.hooks';
-import { Button } from '@app/ui/components/button/button';
+import { Link } from '@app/ui/components/link/link';
 
 interface PrincipalValueProps {
   address: string;
@@ -10,13 +10,13 @@ export function PrincipalValue(props: PrincipalValueProps) {
   const { mode } = useCurrentNetworkState();
 
   return (
-    <Button
+    <Link
       onClick={() => openInNewTab(`https://explorer.hiro.so/address/${address}?chain=${mode}`)}
-      textStyle="label.03"
+      size="sm"
       variant="text"
       wordBreak="break-all"
     >
       {address}
-    </Button>
+    </Link>
   );
 }
diff --git a/src/app/pages/home/components/account-info-card.tsx b/src/app/pages/home/components/account-info-card.tsx
@@ -6,8 +6,8 @@ import { useTotalBalance } from '@app/common/hooks/balance/use-total-balance';
 import { useDrawers } from '@app/common/hooks/use-drawers';
 import { useCurrentAccountNativeSegwitAddressIndexZero } from '@app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks';
 import { useCurrentStacksAccount } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks';
-import { Button } from '@app/ui/components/button/button';
 import { ChevronDownIcon } from '@app/ui/components/icons/chevron-down-icon';
+import { Link } from '@app/ui/components/link/link';
 
 import { AccountActions } from './account-actions';
 
@@ -29,11 +29,7 @@ export function AccountInfoCard() {
       pt={{ base: 'space.05', sm: 'space.06' }}
       pb={{ base: 'space.02', sm: 'space.06' }}
     >
-      <Button
-        onClick={() => setIsShowingSwitchAccountsState(true)}
-        variant="link"
-        _before={{ bg: 'transparent' }}
-      >
+      <Link _before={{ bg: 'transparent' }} onClick={() => setIsShowingSwitchAccountsState(true)}>
         <Flex>
           <styled.p data-testid={SettingsSelectors.CurrentAccountDisplayName} textStyle="label.01">
             {name}
@@ -42,7 +38,7 @@ export function AccountInfoCard() {
             <ChevronDownIcon />
           </Box>
         </Flex>
-      </Button>
+      </Link>
       <Flex
         flexDir={['column', 'column', 'row']}
         justify="space-between"

diff --git a/src/app/pages/onboarding/sign-in/components/sign-in.content.tsx b/src/app/pages/onboarding/sign-in/components/sign-in.content.tsx
@@ -1,6 +1,6 @@
 import { styled } from 'leather-styles/jsx';
 
-import { Button } from '@app/ui/components/button/button';
+import { Link } from '@app/ui/components/link/link';
 
 export function SignInContent({
   onClick,
@@ -18,9 +18,9 @@ export function SignInContent({
       <styled.p textStyle={['label.01', 'heading.05']} my="space.05">
         Speed things up by pasting your entire Secret Key in one go.
       </styled.p>
-      <Button variant="link" textStyle="label.01" width="fit-content" onClick={onClick}>
+      <Link onClick={onClick} size="lg" width="fit-content">
         {twentyFourWordMode ? 'Have a 12-word Secret Key?' : 'Use 24 word Secret Key'}
-      </Button>
+      </Link>
     </>
   );
 }