Merge pull request #4838 from leather-wallet/release/sharp-eye

Release/sharp eye
leather-io · Jan 22, 2024 · 3611a0f · 3611a0f
2 parents 7ceabd1 + 2ae8cf0
commit 3611a0f
Show file tree

Hide file tree

Showing 142 changed files with 1,163 additions and 920 deletions.
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
@@ -5,6 +5,19 @@ import '../src/app/index.css';
 const preview: Preview = {
   parameters: {
     actions: { argTypesRegex: '^on[A-Z].*' },
+    backgrounds: {
+      default: 'leather-light-mode',
+      values: [
+        {
+          name: 'leather-light-mode',
+          value: '#FFFFFF',
+        },
+        {
+          name: 'leather-dark-mode',
+          value: '#12100F',
+        },
+      ],
+    },
     controls: {
       matchers: {
         color: /(background|color)$/i,

diff --git a/package.json b/package.json
@@ -131,6 +131,7 @@
     "@dlc-link/dlc-tools": "1.1.1",
     "@fungible-systems/zone-file": "2.0.0",
     "@hirosystems/token-metadata-api-client": "1.2.0",
+    "@leather-wallet/tokens": "0.0.5",
     "@ledgerhq/hw-transport-webusb": "6.27.19",
     "@noble/hashes": "1.3.2",
     "@noble/secp256k1": "2.0.0",
@@ -140,6 +141,7 @@
     "@radix-ui/react-dropdown-menu": "2.0.6",
     "@radix-ui/react-select": "2.0.0",
     "@radix-ui/react-tabs": "1.0.4",
+    "@radix-ui/react-tooltip": "1.0.7",
     "@radix-ui/themes": "2.0.3",
     "@reduxjs/toolkit": "1.9.6",
     "@scure/base": "1.1.3",
@@ -168,7 +170,6 @@
     "@tanstack/react-query": "4.35.7",
     "@tanstack/react-query-devtools": "4.35.7",
     "@tanstack/react-query-persist-client": "4.35.7",
-    "@tippyjs/react": "4.2.6",
     "@types/lodash.uniqby": "4.7.7",
     "@typescript-eslint/eslint-plugin": "6.7.4",
     "@vkontakte/vk-qr": "2.0.13",
@@ -240,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.3",
     "@ls-lint/ls-lint": "2.2.2",
     "@pandacss/dev": "0.26.2",
     "@playwright/test": "1.40.1",

diff --git a/panda.config.ts b/panda.config.ts
@@ -4,6 +4,7 @@ import { breakpoints } from './theme/breakpoints';
 import { globalCss } from './theme/global/global';
 import { keyframes } from './theme/keyframes';
 import { buttonRecipe } from './theme/recipes/button-recipe';
+import { linkRecipe } from './theme/recipes/link-recipe';
 import { semanticTokens } from './theme/semantic-tokens';
 import { tokens } from './theme/tokens';
 import { textStyles } from './theme/typography';
@@ -32,7 +33,7 @@ export default defineConfig({
       keyframes,
       textStyles,
       breakpoints,
-      recipes: { button: buttonRecipe },
+      recipes: { button: buttonRecipe, link: linkRecipe },
     },
   },
   outdir: 'leather-styles',

diff --git a/src/app/common/theme-provider.tsx b/src/app/common/theme-provider.tsx
@@ -1,5 +1,6 @@
 import { createContext, useContext, useEffect, useState } from 'react';
 
+import * as RadixTooltip from '@radix-ui/react-tooltip';
 import { Theme as RadixTheme } from '@radix-ui/themes';
 
 import { noop } from '@shared/utils';
@@ -80,7 +81,9 @@ export function ThemeSwitcherProvider({ children }: ThemeSwitcherProviderProps)
 
   return (
     <ThemeContext.Provider value={{ theme, userSelectedTheme, setUserSelectedTheme }}>
-      <RadixTheme appearance={theme}>{children}</RadixTheme>
+      <RadixTheme appearance={theme}>
+        <RadixTooltip.Provider>{children}</RadixTooltip.Provider>
+      </RadixTheme>
     </ThemeContext.Provider>
   );
 }

diff --git a/src/app/components/app-version.tsx b/src/app/components/app-version.tsx
@@ -7,8 +7,7 @@ import { BRANCH_NAME, COMMIT_SHA } from '@shared/environment';
 
 import { openInNewTab } from '@app/common/utils/open-in-new-tab';
 import { useIsLatestPullRequestBuild } from '@app/query/common/outdated-pr/outdated-pr.query';
-
-import { Tooltip } from './tooltip';
+import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip';
 
 interface AppVersionLabelProps extends HTMLStyledProps<'span'> {
   isLatestVersion: boolean;
@@ -47,15 +46,15 @@ export function AppVersion() {
 
   if (!isLatestBuild && process.env.WALLET_ENVIRONMENT === 'feature') {
     return (
-      <Tooltip label="Outdated PR build, download the latest version">
+      <BasicTooltip label="Outdated PR build, download the latest version">
         <AppVersionLabel
           isLatestVersion={false}
           cursor="pointer"
           onClick={() => openInNewTab(pullRequestLink ?? '')}
         >
           {version}
         </AppVersionLabel>
-      </Tooltip>
+      </BasicTooltip>
     );
   }
 

diff --git a/src/app/components/available-balance.tsx b/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 { Tooltip } from '@app/components/tooltip';
 import { InfoIcon } from '@app/ui/components/icons/info-icon';
+import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip';
 
 export function AvailableBalance(props: { balance: Money; balanceTooltipLabel?: string }) {
   const {
@@ -18,11 +18,11 @@ export function AvailableBalance(props: { balance: Money; balanceTooltipLabel?:
         <styled.span color="accent.text-subdued" textStyle="caption.01">
           Available balance
         </styled.span>
-        <Tooltip label={balanceTooltipLabel} placement="top">
+        <BasicTooltip label={balanceTooltipLabel} side="top">
           <Box>
             <InfoIcon color="accent.text-subdued" size="xs" />
           </Box>
-        </Tooltip>
+        </BasicTooltip>
       </HStack>
       <styled.span color="accent.text-subdued" mr="space.02" textStyle="caption.01">
         {formatMoney(balance)}

diff --git a/src/app/components/bitcoin-contract-entry-point/bitcoin-contract-entry-point-layout.tsx b/src/app/components/bitcoin-contract-entry-point/bitcoin-contract-entry-point-layout.tsx
@@ -5,7 +5,7 @@ import { Money } from '@shared/models/money.model';
 import { formatBalance } from '@app/common/format-balance';
 import { ftDecimals } from '@app/common/stacks-utils';
 import { Flag } from '@app/components/layout/flag';
-import { Tooltip } from '@app/components/tooltip';
+import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip';
 
 import { LoadingSpinner } from '../loading-spinner';
 
@@ -33,14 +33,14 @@ export function BitcoinContractEntryPointLayout(props: BitcoinContractEntryPoint
       <Flag align="middle" img={icon} spacing="space.04" width="100%">
         <HStack alignItems="center" justifyContent="space-between" width="100%">
           <styled.span textStyle="label.01">Bitcoin Contracts</styled.span>
-          <Tooltip
+          <BasicTooltip
             label={formattedBalance.isAbbreviated ? balance.amount.toString() : undefined}
-            placement="left-start"
+            side="left"
           >
             <styled.span textStyle="label.01">
               {isLoading ? <LoadingSpinner size="sm" /> : formattedBalance.value}
             </styled.span>
-          </Tooltip>
+          </BasicTooltip>
         </HStack>
         <HStack alignItems="center" justifyContent="space-between" width="100%">
           <styled.span textStyle="caption.02">{caption}</styled.span>

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 { LeatherButton } from '@app/ui/components/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.
-                  <LeatherButton
+                  <Link
                     ml="space.01"
                     onClick={() => openInNewTab('https://buybitcoinworldwide.com/fee-calculator/')}
                     textStyle="body.02"
-                    variant="link"
                   >
                     View fee calculator
-                  </LeatherButton>
+                  </Link>
                 </styled.span>
                 <Stack gap="space.01">
                   <TextInputField

diff --git a/src/app/components/broadcast-error-drawer/broadcast-error-drawer.layout.tsx b/src/app/components/broadcast-error-drawer/broadcast-error-drawer.layout.tsx
@@ -2,7 +2,7 @@ import GenericError from '@assets/images/generic-error.png';
 import { Flex, styled } from 'leather-styles/jsx';
 
 import { BaseDrawer } from '@app/components/drawer/base-drawer';
-import { LeatherButton } from '@app/ui/components/button';
+import { Button } from '@app/ui/components/button/button';
 
 interface BroadcastErrorDrawerLayoutProps {
   message: string;
@@ -27,9 +27,9 @@ export function BroadcastErrorDrawerLayout({ message, onClose }: BroadcastErrorD
           Your transaction failed to broadcast{' '}
           {message && <>because of the error: {message.toLowerCase()}</>}
         </styled.span>
-        <LeatherButton fullWidth onClick={onClose} mt="space.05">
+        <Button fullWidth onClick={onClose} mt="space.05">
           Close
-        </LeatherButton>
+        </Button>
       </Flex>
     </BaseDrawer>
   );

diff --git a/src/app/components/crypto-assets/bitcoin/brc20-token-asset-list/brc20-token-asset-list.tsx b/src/app/components/crypto-assets/bitcoin/brc20-token-asset-list/brc20-token-asset-list.tsx
@@ -4,10 +4,10 @@ import { RouteUrls } from '@shared/route-urls';
 import { noop } from '@shared/utils';
 
 import { Brc20TokenAssetItem } from '@app/components/crypto-assets/bitcoin/brc20-token-asset-list/components/brc20-token-asset-item';
-import { Tooltip } from '@app/components/tooltip';
 import { useNativeSegwitBalance } from '@app/query/bitcoin/balance/btc-native-segwit-balance.hooks';
 import { Brc20Token } from '@app/query/bitcoin/ordinals/brc20/brc20-tokens.query';
 import { useCurrentAccountNativeSegwitAddressIndexZero } from '@app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks';
+import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip';
 
 import { Brc20AssetListLayout } from './components/brc20-token-asset-list.layout';
 
@@ -31,19 +31,18 @@ export function Brc20TokenAssetList(props: { brc20Tokens?: Brc20Token[] }) {
   return (
     <Brc20AssetListLayout>
       {props.brc20Tokens?.map(token => (
-        <Tooltip
+        <BasicTooltip
           disabled={hasPositiveBtcBalanceForFees}
           key={token.tick}
-          placement="top"
+          side="top"
           label={'Not enough BTC in balance'}
-          hideOnClick={false}
         >
           <Brc20TokenAssetItem
             token={token}
             isPressable={hasPositiveBtcBalanceForFees}
             onClick={hasPositiveBtcBalanceForFees ? () => navigateToBrc20SendForm(token) : noop}
           />
-        </Tooltip>
+        </BasicTooltip>
       ))}
     </Brc20AssetListLayout>
   );

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
@@ -6,8 +6,8 @@ import { formatBalance } from '@app/common/format-balance';
 import { AssetCaption } from '@app/components/crypto-assets/components/asset-caption';
 import { usePressable } from '@app/components/item-hover';
 import { Flag } from '@app/components/layout/flag';
-import { Tooltip } from '@app/components/tooltip';
 import { Brc20TokenIcon } from '@app/ui/components/icons/brc20-token-icon';
+import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip';
 
 interface Brc20TokenAssetItemLayoutProps extends BoxProps {
   balance: Money;
@@ -41,14 +41,14 @@ export function Brc20TokenAssetItemLayout({
           >
             {title}
           </styled.span>
-          <Tooltip
+          <BasicTooltip
             label={formattedBalance.isAbbreviated ? balance.amount.toString() : undefined}
-            placement="left-start"
+            side="left"
           >
             <styled.span data-testid={title} textStyle="label.01">
               {formattedBalance.value}
             </styled.span>
-          </Tooltip>
+          </BasicTooltip>
         </HStack>
         <HStack alignItems="center" justifyContent="space-between" height="1.25rem" width="100%">
           <AssetCaption caption={caption} />

diff --git a/src/app/components/crypto-assets/components/asset-caption.tsx b/src/app/components/crypto-assets/components/asset-caption.tsx
@@ -1,7 +1,7 @@
 import { Flex, HStack, styled } from 'leather-styles/jsx';
 
-import { Tooltip } from '@app/components/tooltip';
 import { InfoIcon } from '@app/ui/components/icons/info-icon';
+import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip';
 
 interface AssetCaptionProps {
   caption: string;
@@ -16,7 +16,7 @@ export function AssetCaption({ caption, isUnanchored }: AssetCaptionProps) {
           <styled.span mx="space.01" textStyle="caption.02">
             • Microblock
           </styled.span>
-          <Tooltip placement="right-end" label={'Learn more about microblocks'}>
+          <BasicTooltip side="right" label={'Learn more about microblocks'}>
             <HStack>
               <a
                 href="https://docs.stacks.co/understand-stacks/microblocks"
@@ -26,7 +26,7 @@ export function AssetCaption({ caption, isUnanchored }: AssetCaptionProps) {
                 <InfoIcon color="accent.text-subdued" ml="space.01" size="xs" />
               </a>
             </HStack>
-          </Tooltip>
+          </BasicTooltip>
         </>
       ) : (
         ''

diff --git a/src/app/components/crypto-assets/crypto-currency-asset/crypto-currency-asset-item.layout.tsx b/src/app/components/crypto-assets/crypto-currency-asset/crypto-currency-asset-item.layout.tsx
@@ -9,7 +9,7 @@ import { formatBalance } from '@app/common/format-balance';
 import { ftDecimals } from '@app/common/stacks-utils';
 import { usePressable } from '@app/components/item-hover';
 import { Flag } from '@app/components/layout/flag';
-import { Tooltip } from '@app/components/tooltip';
+import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip';
 import { truncateMiddle } from '@app/ui/utils/truncate-middle';
 
 import { AssetRowGrid } from '../components/asset-row-grid';
@@ -71,14 +71,14 @@ export function CryptoCurrencyAssetItemLayout({
             </styled.span>
           }
           balance={
-            <Tooltip
+            <BasicTooltip
               label={formattedBalance.isAbbreviated ? balance.amount.toString() : undefined}
-              placement="left-start"
+              side="left"
             >
               <styled.span data-testid={title} textStyle="label.01">
                 {formattedBalance.value} {additionalBalanceInfo}
               </styled.span>
-            </Tooltip>
+            </BasicTooltip>
           }
           caption={<styled.span textStyle="caption.02">{caption}</styled.span>}
           usdBalance={

diff --git a/...nts/crypto-assets/stacks/fungible-token-asset/stacks-fungible-token-asset-item.layout.tsx b/...nts/crypto-assets/stacks/fungible-token-asset/stacks-fungible-token-asset-item.layout.tsx
@@ -7,7 +7,7 @@ import { ftDecimals } from '@app/common/stacks-utils';
 import { StacksAssetAvatar } from '@app/components/crypto-assets/stacks/components/stacks-asset-avatar';
 import { usePressable } from '@app/components/item-hover';
 import { Flag } from '@app/components/layout/flag';
-import { Tooltip } from '@app/components/tooltip';
+import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip';
 
 import { AssetCaption } from '../../components/asset-caption';
 import { AssetRowGrid } from '../../components/asset-row-grid';
@@ -56,14 +56,11 @@ export function StacksFungibleTokenAssetItemLayout({
         <AssetRowGrid
           title={<styled.span textStyle="label.01">{title}</styled.span>}
           balance={
-            <Tooltip
-              label={formattedBalance.isAbbreviated ? amount : undefined}
-              placement="left-start"
-            >
+            <BasicTooltip label={formattedBalance.isAbbreviated ? amount : undefined} side="left">
               <styled.span data-testid={title} textStyle="label.01">
                 {formattedBalance.value}
               </styled.span>
-            </Tooltip>
+            </BasicTooltip>
           }
           caption={<AssetCaption caption={caption} />}
         />

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 { LeatherButton } from '@app/ui/components/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 ? (
-          <LeatherButton
-            display="inline"
-            fontSize="14px"
-            onClick={() => openInNewTab(learnMoreUrl)}
-            variant="link"
-          >
+          <Link display="inline" fontSize="14px" onClick={() => openInNewTab(learnMoreUrl)}>
             {' '}
             Learn more
-          </LeatherButton>
+          </Link>
         ) : null}
         {learnMoreUrl ? '.' : null}
       </styled.span>

diff --git a/src/app/components/edit-nonce-button.tsx b/src/app/components/edit-nonce-button.tsx