chore: disable truncateMiddle temporarily

leather-io · Sep 21, 2023 · 9b9529a · 9b9529a
1 parent 4bbd4d5
commit 9b9529a
Show file tree

Hide file tree

Showing 185 changed files with 807 additions and 746 deletions.
diff --git a/src/app/common/signature/requests.ts b/src/app/common/signature/requests.ts
@@ -2,7 +2,6 @@ import { CommonSignaturePayload, SignaturePayload } from '@stacks/connect';
 import { deserializeCV } from '@stacks/transactions';
 import { TokenInterface, decodeToken } from 'jsontokens';
 
-import { StructuredMessageDataDomain } from '@shared/signature/signature-types';
 import { isString } from '@shared/utils';
 
 export function getGenericSignaturePayloadFromToken(requestToken: string): CommonSignaturePayload {
@@ -27,6 +26,6 @@ export function getStructuredDataPayloadFromToken(requestToken: string) {
   return {
     ...(result as unknown as CommonSignaturePayload),
     message: deserializeCV(Buffer.from(result.message, 'hex')),
-    domain: deserializeCV(Buffer.from(result.domain, 'hex')) as StructuredMessageDataDomain,
+    domain: deserializeCV(Buffer.from(result.domain, 'hex')),
   };
 }
diff --git a/src/app/common/transactions/stacks/is-sip-10-transfer.ts b/src/app/common/transactions/stacks/is-sip-10-transfer.ts
@@ -1,8 +1,8 @@
-import { ContractCallPayload, StacksTransaction } from '@stacks/transactions';
+import { StacksTransaction } from '@stacks/transactions';
 
 export function isSip10Transfer(tx: StacksTransaction) {
   if (!tx.payload || !('functionName' in tx.payload)) return false;
-  const payload = tx.payload as ContractCallPayload;
+  const payload = tx.payload;
   return (
     payload.functionName.content === 'transfer' &&
     (payload.functionArgs.length === 3 || payload.functionArgs.length === 4)

diff --git a/src/app/common/utils/use-waiting-message.ts b/src/app/common/utils/use-waiting-message.ts
@@ -6,7 +6,7 @@ import { useInterval } from './use-interval';
 export type WaitingMessages = Record<number, string>;
 
 function messageForSecondsPassed(waitingMessages: WaitingMessages, seconds: number) {
-  return waitingMessages[seconds as keyof typeof waitingMessages];
+  return waitingMessages[seconds ];
 }
 
 export const useWaitingMessage = (

diff --git a/src/app/components/account/account-avatar/account-avatar.tsx b/src/app/components/account/account-avatar/account-avatar.tsx
@@ -1,6 +1,7 @@
 import { memo } from 'react';
 
 import { BoxProps, Circle } from 'leather-styles/jsx';
+import { token } from 'leather-styles/tokens';
 
 import { useAccountGradient } from '@app/common/hooks/account/use-account-gradient';
 
@@ -38,6 +39,7 @@ export const AccountAvatar = memo(({ name, publicKey, index, ...props }: Account
   return (
     <Circle
       flexShrink={0}
+      // #4164 FIXME migrate color  '#f4f4f6'
       background={isFirstGraphemeEmoji ? '#f4f4f6' : token('colors.accent.background-primary')}
       backgroundImage={isFirstGraphemeEmoji ? undefined : gradient}
       color={token('colors.accent.action-primary-default')}

diff --git a/src/app/components/account/account-list-item-layout.tsx b/src/app/components/account/account-list-item-layout.tsx
@@ -1,7 +1,10 @@
+// #4164 FIXME migrate useMediaQuery
+import { Spinner, useMediaQuery } from '@stacks/ui';
 import { truncateMiddle } from '@stacks/ui-utils';
 import { SettingsSelectors } from '@tests/selectors/settings.selectors';
-import { Flex, Spinner, Stack, StackProps, color, useMediaQuery } from 'leather-styles/jsx';
+import { Flex, HStack, Stack, StackProps } from 'leather-styles/jsx';
 import { styled } from 'leather-styles/jsx';
+import { token } from 'leather-styles/tokens';
 
 import { useConfigBitcoinEnabled } from '@app/query/common/remote-config/remote-config.query';
 
@@ -56,8 +59,7 @@ export function AccountListItemLayout(props: AccountListItemLayoutProps) {
       {...rest}
     >
       <Flag align="middle" img={avatar} spacing="space.04" width="100%">
-        {/* // FIXME isinline */}
-        <Stack gap="extra-tight">
+        <HStack gap="space.01">
           <SpaceBetween>
             <Stack alignItems="center" gap="space.02">
               {accountName}
@@ -75,13 +77,7 @@ export function AccountListItemLayout(props: AccountListItemLayoutProps) {
               balanceLabel
             )}
           </SpaceBetween>
-          <Stack
-            alignItems="center"
-            gap="6px"
-            // #4164 FIXME migrate
-            //isInline
-            whiteSpace="nowrap"
-          >
+          <HStack alignItems="center" gap="6px" whiteSpace="nowrap">
             <CaptionDotSeparator>
               <styled.span textStyle="caption.02">
                 {truncateMiddle(stxAddress, isNarrowViewport ? 3 : 4)}
@@ -90,8 +86,8 @@ export function AccountListItemLayout(props: AccountListItemLayoutProps) {
                 <styled.span textStyle="caption.02">{truncateMiddle(btcAddress, 5)}</styled.span>
               )}
             </CaptionDotSeparator>
-          </Stack>
-        </Stack>
+          </HStack>
+        </HStack>
       </Flag>
       {children}
     </Flex>

diff --git a/src/app/components/bitcoin-custom-fee/bitcoin-custom-fee-fiat.tsx b/src/app/components/bitcoin-custom-fee/bitcoin-custom-fee-fiat.tsx
@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 
 import { useField } from 'formik';
-import { Flex } from 'leather-styles/jsx';
+import { Flex, styled } from 'leather-styles/jsx';
 
 import { satToBtc } from '@app/common/money/unit-conversion';
 

diff --git a/src/app/components/bitcoin-custom-fee/bitcoin-custom-fee.tsx b/src/app/components/bitcoin-custom-fee/bitcoin-custom-fee.tsx
@@ -93,8 +93,8 @@ export function BitcoinCustomFee({
                     View fee calculator
                   </Link>
                 </styled.span>
-                <Stack gap="extra-tight">
-                  <styled.spanInputField
+                <Stack gap="space.01">
+                  <TextInputField
                     hasError={hasInsufficientBalanceError}
                     label={feeInputLabel}
                     name="feeRate"

diff --git a/src/app/components/bitcoin-fees-list/components/fees-list-error.tsx b/src/app/components/bitcoin-fees-list/components/fees-list-error.tsx
@@ -1,24 +1,24 @@
 import { useNavigate } from 'react-router-dom';
 
-import { Box } from 'leather-styles/jsx';
+import { Box, styled } from 'leather-styles/jsx';
 
 import { RouteUrls } from '@shared/route-urls';
 
 import { GenericError } from '@app/components/generic-error/generic-error';
 
 const body = 'Check balance and try again';
 const helpTextList = [
-  <Box as="li" mt="space.04" key={1}>
+  <styled.li mt="space.04" key={1}>
     <styled.span>Possibly caused by api issues</styled.span>
-  </Box>,
+  </styled.li>,
 ];
 const title = 'Unable to calculate fees';
 
 export function FeesListError() {
   const navigate = useNavigate();
 
   return (
-    <Box textAlign="center" px={['unset', 'loose']} py="space.04" width="100%">
+    <Box textAlign="center" px={['unset', 'space.05']} py="space.04" width="100%">
       <GenericError
         body={body}
         helpTextList={helpTextList}

diff --git a/src/app/components/bitcoin-fees-list/components/fees-list-item.tsx b/src/app/components/bitcoin-fees-list/components/fees-list-item.tsx
@@ -1,5 +1,5 @@
 import { SharedComponentsSelectors } from '@tests/selectors/shared-component.selectors';
-import { Box, Flex, styled } from 'leather-styles/jsx';
+import { Flex, styled } from 'leather-styles/jsx';
 import { token } from 'leather-styles/tokens';
 
 // TODO replace transistion with Easings token
@@ -26,9 +26,8 @@ export function FeesListItem({
   ...props
 }: FeesListItemProps) {
   return (
-    <Box
-      _hover={{ background: token('colors.accent.component-background-hover') }}
-      as="button"
+    <styled.button
+      _hover={{ background: '#F9F9FA' }}
       border={isSelected ? '4px solid' : '1px solid'}
       borderColor={token('colors.accent.action-primary-default')}
       borderRadius="16px"
@@ -54,6 +53,6 @@ export function FeesListItem({
           {`${feeFiatValue} | ${feeRate} sats/vB | ${feeAmount}`}
         </styled.span>
       </Flex>
-    </Box>
+    </styled.button>
   );
 }
diff --git a/src/app/components/bitcoin-transaction-item/bitcoin-transaction-caption.tsx b/src/app/components/bitcoin-transaction-item/bitcoin-transaction-caption.tsx
@@ -1,4 +1,5 @@
 import { styled } from 'leather-styles/jsx';
+import { token } from 'leather-styles/tokens';
 
 interface BitcoinTransactionCaptionProps {
   children: string;

diff --git a/src/app/components/bitcoin-transaction-item/bitcoin-transaction-icon.tsx b/src/app/components/bitcoin-transaction-item/bitcoin-transaction-icon.tsx
@@ -1,13 +1,16 @@
+import { FiArrowDown, FiArrowUp } from 'react-icons/fi';
+
 // #4164 FIXME migrate colorFromTx then remove this
-import { Box, color } from '@stacks/ui';
+import { color } from '@stacks/ui';
 import { BoxProps, Circle, Flex } from 'leather-styles/jsx';
 import { token } from 'leather-styles/tokens';
 
 import { BitcoinTx } from '@shared/models/transactions/bitcoin-transaction.model';
 
+import { isBitcoinTxInbound } from '@app/common/transactions/bitcoin/utils';
 import { BtcIcon } from '@app/components/icons/btc-icon';
 
-import { IconForTx, colorFromTx } from './utils';
+import { colorFromTx } from './utils';
 
 interface TransactionIconProps extends BoxProps {
   transaction: BitcoinTx;
@@ -29,8 +32,11 @@ export function BitcoinTransactionIcon({ transaction, btcAddress, ...rest }: Tra
         borderColor={token('colors.accent.background-primary')}
         {...rest}
       >
-        {/* // #4164 FIXME refactor this IconForTx */}
-        <Box size="13px" as={IconForTx(btcAddress, transaction)} />
+        {isBitcoinTxInbound(btcAddress, transaction) ? (
+          <FiArrowDown size="13px" />
+        ) : (
+          <FiArrowUp size="13px" />
+        )}
       </Circle>
     </Flex>
   );

diff --git a/src/app/components/bitcoin-transaction-item/bitcoin-transaction-inscription-icon.tsx b/src/app/components/bitcoin-transaction-item/bitcoin-transaction-inscription-icon.tsx
@@ -1,10 +1,16 @@
-import { Box, Circle, Flex } from 'leather-styles/jsx';
+import { FiArrowDown, FiArrowUp } from 'react-icons/fi';
+
+import { Circle, Flex } from 'leather-styles/jsx';
+import { token } from 'leather-styles/tokens';
 
 import { SupportedInscription } from '@shared/models/inscription.model';
 import { BitcoinTx } from '@shared/models/transactions/bitcoin-transaction.model';
 
+import { isBitcoinTxInbound } from '@app/common/transactions/bitcoin/utils';
+
 import { OrdinalIcon } from '../icons/ordinal-icon';
-import { IconForTx, colorFromTx } from './utils';
+
+// import {  colorFromTx } from './utils';
 
 interface BitcoinTransactionInscriptionIconProps {
   inscription: SupportedInscription;
@@ -17,7 +23,8 @@ function InscriptionIcon({ inscription, ...rest }: { inscription: SupportedInscr
     case 'image':
       return (
         <Circle
-          bg={color('accent')}
+          // #4164 FIXME migrate color accent
+          bg={token('colors.accent.background-secondary')}
           color={token('colors.accent.background-primary')}
           flexShrink={0}
           position="relative"
@@ -55,13 +62,18 @@ export function BitcoinTransactionInscriptionIcon({
         right="-9px"
         position="absolute"
         size="21px"
-        bg={color(colorFromTx(transaction))}
+        // #4164 FIXME migrate to semantic
+        // bg={color(colorFromTx(transaction))}
         color={token('colors.accent.background-primary')}
         border="2px solid"
         borderColor={token('colors.accent.background-primary')}
         {...rest}
       >
-        <Box size="13px" as={IconForTx(btcAddress, transaction)} />
+        {isBitcoinTxInbound(btcAddress, transaction) ? (
+          <FiArrowDown size="13px" />
+        ) : (
+          <FiArrowUp size="13px" />
+        )}
       </Circle>
     </Flex>
   );

diff --git a/src/app/components/bitcoin-transaction-item/utils.ts b/src/app/components/bitcoin-transaction-item/utils.ts
@@ -1,9 +1,5 @@
-import { FiArrowDown, FiArrowUp } from 'react-icons/fi';
-
 import { BitcoinTx } from '@shared/models/transactions/bitcoin-transaction.model';
 
-import { isBitcoinTxInbound } from '@app/common/transactions/bitcoin/utils';
-
 type ColorsStringLiteral =
   | 'accent'
   | 'brand'
@@ -42,12 +38,6 @@ export const colorFromTx = (tx: BitcoinTx): ColorsStringLiteral => {
   return colorMap[statusFromTx(tx)] ?? 'feedback-error';
 };
 
-// #4164 FIXME refactor this to return JSX with size
-export function IconForTx(address: string, tx: BitcoinTx) {
-  if (isBitcoinTxInbound(address, tx)) return FiArrowDown;
-  return FiArrowUp;
-}
-
 export function containsTaprootInput(tx: BitcoinTx) {
   return tx.vin.some(input => input.prevout.scriptpubkey_type === 'v1_p2tr');
 }
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
@@ -1,8 +1,9 @@
 import GenericError from '@assets/images/generic-error.png';
-import { Box, Button, Flex } from 'leather-styles/jsx';
+import { Flex, styled } from 'leather-styles/jsx';
 
 import { BaseDrawer } from '@app/components/drawer/base-drawer';
 
+import { LeatherButton } from '../button/button';
 import { Body, Title } from '../typography';
 
 interface BroadcastErrorDrawerLayoutProps {
@@ -20,15 +21,16 @@ export function BroadcastErrorDrawerLayout({ message, onClose }: BroadcastErrorD
         position="relative"
         top="-24px"
       >
-        <img src={GenericError} width="106px" height="72px" m="0 auto" />
+        <styled.img src={GenericError} width="106px" height="72px" m="0 auto" />
         <Title mt="base-loose">Unable to broadcast transaction</Title>
-        <Body mt="base-tight" px="space.04">
+        <Body mt="space.03" px="space.04">
           Your transaction failed to broadcast{' '}
           {message && <>because of the error: {message.toLowerCase()}</>}
         </Body>
-        <Button alignSelf="center" mt="space.05" mode="tertiary" onClick={onClose}>
+        {/* // #4164 FIXME tertiary */}
+        <LeatherButton alignSelf="center" mt="space.05" variant="ghost" onClick={onClose}>
           Close
-        </Button>
+        </LeatherButton>
       </Flex>
     </BaseDrawer>
   );

diff --git a/src/app/components/button/button.tsx b/src/app/components/button/button.tsx
@@ -1,6 +1,8 @@
 import { styled } from 'leather-styles/jsx';
 import { type ButtonVariantProps, button as buttonRecipe } from 'leather-styles/recipes';
 
+// #4164 FIXME migrate - maybe we need an isLoading state here?
+
 const StyledButton = styled('button');
 
 export type ButtonProps = Omit<

diff --git a/src/app/components/crypto-assets/components/asset-caption.tsx b/src/app/components/crypto-assets/components/asset-caption.tsx
@@ -2,7 +2,7 @@ import { FiInfo } from 'react-icons/fi';
 
 // #4164 FIXME migrate Tooltip - use radix instead
 import { Tooltip } from '@stacks/ui';
-import { Flex, Stack } from 'leather-styles/jsx';
+import { Flex, HStack } from 'leather-styles/jsx';
 import { styled } from 'leather-styles/jsx';
 
 interface AssetCaptionProps {
@@ -19,7 +19,7 @@ export function AssetCaption({ caption, isUnanchored }: AssetCaptionProps) {
             • Microblock
           </styled.span>
           <Tooltip placement="right-end" label={'Learn more about microblocks'}>
-            <Stack isInline>
+            <HStack>
               <a
                 href="https://docs.stacks.co/understand-stacks/microblocks"
                 target="_blank"
@@ -34,7 +34,7 @@ export function AssetCaption({ caption, isUnanchored }: AssetCaptionProps) {
                   style={{ marginLeft: '1px' }} // check this margin
                 />
               </a>
-            </Stack>
+            </HStack>
           </Tooltip>
         </>
       ) : (

diff --git a/src/app/components/crypto-assets/crypto-currency-asset/asset-copy-icon.tsx b/src/app/components/crypto-assets/crypto-currency-asset/asset-copy-icon.tsx
@@ -1,22 +1,32 @@
 import { FiCheck, FiCopy } from 'react-icons/fi';
 
 import { UserAreaSelectors } from '@tests-legacy/integration/user-area.selectors';
-import { Box, Flex } from 'leather-styles/jsx';
+import { Flex } from 'leather-styles/jsx';
+import { token } from 'leather-styles/tokens';
 
 interface AssetItemCopyIconProps {
   hasCopied: boolean;
 }
 
 export function AssetItemCopyIcon({ hasCopied }: AssetItemCopyIconProps) {
   return (
-    <Flex alignItems="center" justifyContent="center" size="36px">
-      <Box
-        size="16px"
-        color={token('colors.accent.text-subdued')}
-        data-testid={UserAreaSelectors.AccountCopyAddress}
-        as={hasCopied ? FiCheck : FiCopy}
-        mt="2px"
-      />
+    <Flex alignItems="center" justifyContent="center" width="36px" height="36px">
+      {/* // #4164 FIXME refactor these icons to not duplicate - visual inspect + delete css*/}
+      {hasCopied ? (
+        <FiCheck
+          size="16px"
+          data-testid={UserAreaSelectors.AccountCopyAddress}
+          color={token('colors.accent.text-subdued')}
+          style={{ marginTop: '2px' }}
+        />
+      ) : (
+        <FiCopy
+          data-testid={UserAreaSelectors.AccountCopyAddress}
+          size="16px"
+          color={token('colors.accent.text-subdued')}
+          style={{ marginTop: '2px' }}
+        />
+      )}
     </Flex>
   );
 }