Merge pull request #5026 from leather-wallet/release/brc20-fix

Release/brc20 fix

.env.example

@@ -4,3 +4,4 @@ SEGMENT_WRITE_KEY=segmentwritekey
 SENTRY_DSN=sentrydsn
 TRANSAK_API_KEY=transakapikey
 WALLET_ENVIRONMENT=development
+BESTINSLOT_API_KEY=bestinslotapikey

.github/workflows/build-extension.yml

@@ -51,6 +51,7 @@ jobs:
           SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
           SEGMENT_WRITE_KEY: ${{ secrets.SEGMENT_WRITE_KEY_STAGING }}
           TRANSAK_API_KEY: ${{ secrets.TRANSAK_API_KEY }}
+          BESTINSLOT_API_KEY: ${{ secrets.BESTINSLOT_API_KEY }}
           PR_NUMBER: ${{ github.event.number }}
           COMMIT_SHA: ${{ env.SHORT_SHA }}
 

.github/workflows/development-extension.yml

@@ -12,6 +12,7 @@ env:
   MOONPAY_API_KEY: ${{ secrets.MOONPAY_API_KEY }}
   SEGMENT_WRITE_KEY: ${{ secrets.SEGMENT_WRITE_KEY_STAGING }}
   TRANSAK_API_KEY: ${{ secrets.TRANSAK_API_KEY }}
+  BESTINSLOT_API_KEY: ${{ secrets.BESTINSLOT_API_KEY }}
   PREVIEW_RELEASE: true
   WALLET_ENVIRONMENT: preview
 

.github/workflows/publish-extensions.yml

@@ -12,6 +12,7 @@ env:
   SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
   SEGMENT_WRITE_KEY: ${{ secrets.SEGMENT_WRITE_KEY }}
   TRANSAK_API_KEY: ${{ secrets.TRANSAK_API_KEY }}
+  BESTINSLOT_API_KEY: ${{ secrets.BESTINSLOT_API_KEY }}
   WALLET_ENVIRONMENT: production
   IS_PUBLISHING: true
 

package.json

@@ -139,6 +139,7 @@
     "@octokit/types": "12.4.0",
     "@radix-ui/colors": "3.0.0",
     "@radix-ui/react-accessible-icon": "1.0.3",
+    "@radix-ui/react-avatar": "1.0.4",
     "@radix-ui/react-dropdown-menu": "2.0.6",
     "@radix-ui/react-select": "2.0.0",
     "@radix-ui/react-tabs": "1.0.4",
@@ -202,6 +203,7 @@
     "ledger-bitcoin": "0.2.3",
     "limiter": "2.1.0",
     "lodash.get": "4.4.2",
+    "lodash.isequal": "4.5.0",
     "lodash.uniqby": "4.7.0",
     "micro-packed": "0.3.2",
     "object-hash": "3.0.0",
@@ -223,7 +225,7 @@
     "react-lottie": "1.2.4",
     "react-redux": "8.1.3",
     "react-router-dom": "6.22.1",
-    "react-virtuoso": "4.6.0",
+    "react-virtuoso": "4.7.1",
     "redux-persist": "6.0.0",
     "rxjs": "7.8.1",
     "style-loader": "3.3.4",
@@ -269,6 +271,7 @@
     "@types/html-webpack-plugin": "3.2.9",
     "@types/jsdom": "21.1.3",
     "@types/lodash.get": "4.4.7",
+    "@types/lodash.isequal": "4.5.8",
     "@types/node": "20.11.19",
     "@types/prismjs": "1.26.3",
     "@types/promise-memoize": "1.2.4",

src/app/common/publish-subscribe.ts

@@ -1,6 +1,9 @@
 import type { Transaction } from '@scure/btc-signer';
+import type { SignatureData } from '@stacks/connect';
 import type { StacksTransaction } from '@stacks/transactions';
 
+import type { UnsignedMessage } from '@shared/signature/signature-types';
+
 type PubTypeFn<E> = <Key extends string & keyof E>(
   event: Key,
   // Ensures if we have an event with no payload, the second arg can be empty,
@@ -59,6 +62,13 @@ export interface GlobalAppEvents {
   ledgerBitcoinTxSigningCancelled: {
     unsignedPsbt: string;
   };
+  ledgerStacksMessageSigned: {
+    unsignedMessage: UnsignedMessage;
+    messageSignatures: SignatureData;
+  };
+  ledgerStacksMessageSigningCancelled: {
+    unsignedMessage: UnsignedMessage;
+  };
 }
 
 export const appEvents = createPublishSubscribe<GlobalAppEvents>();

src/app/components/bitcoin-transaction-item/bitcoin-transaction-inscription-icon.tsx

@@ -2,7 +2,7 @@ import { Circle } from 'leather-styles/jsx';
 
 import { SupportedInscription } from '@shared/models/inscription.model';
 
-import { OrdinalIcon } from '@app/ui/components/avatar-icon/ordinal-icon';
+import { OrdinalAvatarIcon } from '@app/ui/components/avatar/ordinal-avatar-icon';
 
 export function InscriptionIcon({ inscription, ...rest }: { inscription: SupportedInscription }) {
   switch (inscription.type) {
@@ -13,7 +13,7 @@ export function InscriptionIcon({ inscription, ...rest }: { inscription: Support
           color="ink.background-primary"
           flexShrink={0}
           position="relative"
-          size="36px"
+          size="xl"
           {...rest}
         >
           <img
@@ -29,6 +29,6 @@ export function InscriptionIcon({ inscription, ...rest }: { inscription: Support
         </Circle>
       );
     default:
-      return <OrdinalIcon />;
+      return <OrdinalAvatarIcon />;
   }
 }

src/app/components/bitcoin-transaction-item/bitcoin-transaction-item.tsx

@@ -21,7 +21,7 @@ import {
 } from '@app/query/bitcoin/ordinals/inscription.hooks';
 import { useGetInscriptionsByOutputQuery } from '@app/query/bitcoin/ordinals/inscriptions-by-param.query';
 import { useCurrentAccountNativeSegwitAddressIndexZero } from '@app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks';
-import { BtcIcon } from '@app/ui/components/avatar-icon/btc-icon';
+import { BtcAvatarIcon } from '@app/ui/components/avatar/btc-avatar-icon';
 import { BulletSeparator } from '@app/ui/components/bullet-separator/bullet-separator';
 import { Caption } from '@app/ui/components/typography/caption';
 
@@ -96,7 +96,9 @@ export function BitcoinTransactionItem({ transaction }: BitcoinTransactionItemPr
       txCaption={txCaption}
       txIcon={
         <BitcoinTransactionIcon
-          icon={inscriptionData ? <InscriptionIcon inscription={inscriptionData} /> : <BtcIcon />}
+          icon={
+            inscriptionData ? <InscriptionIcon inscription={inscriptionData} /> : <BtcAvatarIcon />
+          }
           transaction={transaction}
           btcAddress={bitcoinAddress}
         />

src/app/components/brc20-tokens-loader.tsx

@@ -1,5 +1,5 @@
 import { useBrc20Tokens } from '@app/common/hooks/use-brc20-tokens';
-import { Brc20Token } from '@app/query/bitcoin/ordinals/brc20/brc20-tokens.query';
+import { Brc20Token } from '@app/query/bitcoin/bitcoin-client';
 
 interface Brc20TokensLoaderProps {
   children(brc20Tokens: Brc20Token[]): React.JSX.Element;

src/app/components/crypto-assets/bitcoin/brc20-token-asset-list/brc20-token-asset-list.tsx

@@ -4,7 +4,7 @@ import { RouteUrls } from '@shared/route-urls';
 import { noop } from '@shared/utils';
 
 import { useNativeSegwitBalance } from '@app/query/bitcoin/balance/btc-native-segwit-balance.hooks';
-import { Brc20Token } from '@app/query/bitcoin/ordinals/brc20/brc20-tokens.query';
+import { Brc20Token } from '@app/query/bitcoin/bitcoin-client';
 import { useCurrentAccountNativeSegwitAddressIndexZero } from '@app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks';
 
 import { Brc20TokenAssetItemLayout } from './components/brc20-token-asset-item.layout';
@@ -19,9 +19,9 @@ export function Brc20TokenAssetList(props: { brc20Tokens?: Brc20Token[] }) {
     btcCryptoCurrencyAssetBalance.balance.amount.isGreaterThan(0);
 
   function navigateToBrc20SendForm(token: Brc20Token) {
-    const { tick, available_balance, decimals } = token;
-    navigate(RouteUrls.SendBrc20SendForm.replace(':ticker', tick), {
-      state: { balance: available_balance, tick, decimals },
+    const { ticker, available_balance, decimals, holderAddress } = token;
+    navigate(RouteUrls.SendBrc20SendForm.replace(':ticker', ticker), {
+      state: { balance: available_balance, ticker, decimals, holderAddress },
     });
   }
 
@@ -31,7 +31,7 @@ export function Brc20TokenAssetList(props: { brc20Tokens?: Brc20Token[] }) {
     <Brc20AssetListLayout>
       {props.brc20Tokens?.map(token => (
         <Brc20TokenAssetItemLayout
-          key={token.tick}
+          key={token.ticker}
           displayNotEnoughBalance={!hasPositiveBtcBalanceForFees}
           token={token}
           onClick={hasPositiveBtcBalanceForFees ? () => navigateToBrc20SendForm(token) : noop}

src/app/components/crypto-assets/bitcoin/brc20-token-asset-list/components/brc20-token-asset-item.layout.tsx

@@ -3,8 +3,8 @@ import { styled } from 'leather-styles/jsx';
 import { createMoney } from '@shared/models/money.model';
 
 import { formatBalance } from '@app/common/format-balance';
-import { Brc20Token } from '@app/query/bitcoin/ordinals/brc20/brc20-tokens.query';
-import { Brc20TokenIcon } from '@app/ui/components/avatar-icon/brc20-token-icon';
+import { Brc20Token } from '@app/query/bitcoin/bitcoin-client';
+import { Brc20AvatarIcon } from '@app/ui/components/avatar/brc20-avatar-icon';
 import { ItemInteractive } from '@app/ui/components/item/item-interactive';
 import { ItemLayout } from '@app/ui/components/item/item.layout';
 import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip';
@@ -19,7 +19,7 @@ export function Brc20TokenAssetItemLayout({
   displayNotEnoughBalance,
   token,
 }: Brc20TokenAssetItemLayoutProps) {
-  const balance = createMoney(Number(token.overall_balance), token.tick, 0);
+  const balance = createMoney(Number(token.overall_balance), token.ticker, 0);
   const formattedBalance = formatBalance(balance.amount.toString());
 
   return (
@@ -29,18 +29,18 @@ export function Brc20TokenAssetItemLayout({
       label="Not enough BTC in balance"
       side="top"
     >
-      <ItemInteractive onClick={onClick}>
+      <ItemInteractive onClick={onClick} my="space.02">
         <ItemLayout
-          flagImg={<Brc20TokenIcon />}
-          titleLeft={token.tick}
+          flagImg={<Brc20AvatarIcon />}
+          titleLeft={token.ticker}
           captionLeft="BRC-20"
           titleRight={
             <BasicTooltip
               asChild
               label={formattedBalance.isAbbreviated ? balance.amount.toString() : undefined}
               side="left"
             >
-              <styled.span data-testid={token.tick} fontWeight={500} textStyle="label.02">
+              <styled.span data-testid={token.ticker} fontWeight={500} textStyle="label.02">
                 {formattedBalance.value}
               </styled.span>
             </BasicTooltip>

src/app/components/crypto-assets/choose-crypto-asset/crypto-asset-list.tsx

@@ -6,7 +6,7 @@ import { BitcoinNativeSegwitAccountLoader } from '@app/components/account/bitcoi
 import { BitcoinBalanceLoader } from '@app/components/balance/bitcoin-balance-loader';
 import { Brc20TokensLoader } from '@app/components/brc20-tokens-loader';
 import { Brc20TokenAssetList } from '@app/components/crypto-assets/bitcoin/brc20-token-asset-list/brc20-token-asset-list';
-import { BtcIcon } from '@app/ui/components/avatar-icon/btc-icon';
+import { BtcAvatarIcon } from '@app/ui/components/avatar/btc-avatar-icon';
 
 import { CryptoCurrencyAssetItemLayout } from '../crypto-currency-asset/crypto-currency-asset-item.layout';
 import { CryptoAssetListItem } from './crypto-asset-list-item';
@@ -27,7 +27,7 @@ export function CryptoAssetList({ cryptoAssetBalances, onItemClick }: CryptoAsse
             {balance => (
               <CryptoCurrencyAssetItemLayout
                 assetBalance={balance}
-                icon={<BtcIcon />}
+                icon={<BtcAvatarIcon />}
                 onClick={() => onItemClick(balance)}
               />
             )}

src/app/components/crypto-assets/choose-crypto-asset/crypto-currency-asset-icon.tsx

@@ -1,14 +1,14 @@
 import type { Blockchains } from '@shared/models/blockchain.model';
 
-import { StxAvatar } from '@app/components/crypto-assets/stacks/components/stx-avatar';
-import { BtcIcon } from '@app/ui/components/avatar-icon/btc-icon';
+import { BtcAvatarIcon } from '@app/ui/components/avatar/btc-avatar-icon';
+import { StxAvatarIcon } from '@app/ui/components/avatar/stx-avatar-icon';
 
 export function CryptoCurrencyAssetIcon(props: { blockchain: Blockchains }) {
   switch (props.blockchain) {
     case 'bitcoin':
-      return <BtcIcon />;
+      return <BtcAvatarIcon />;
     case 'stacks':
-      return <StxAvatar />;
+      return <StxAvatarIcon />;
     default:
       return <></>;
   }

src/app/components/crypto-assets/crypto-currency-asset/crypto-currency-asset-item.layout.tsx

@@ -35,7 +35,7 @@ export function CryptoCurrencyAssetItemLayout({
     parseCryptoCurrencyAssetBalance(assetBalance);
 
   return (
-    <ItemInteractive data-testid={dataTestId} onClick={onClick}>
+    <ItemInteractive data-testid={dataTestId} onClick={onClick} my="space.02">
       <ItemLayout
         flagImg={icon}
         titleLeft={title}

src/app/components/crypto-assets/stacks/components/stacks-asset-avatar.tsx

@@ -1,9 +1,9 @@
 import { Box, BoxProps } from 'leather-styles/jsx';
 
+import { Avatar, defaultFallbackDelay } from '@app/ui/components/avatar/avatar';
+import { StxAvatarIcon } from '@app/ui/components/avatar/stx-avatar-icon';
 import { DynamicColorCircle } from '@app/ui/components/dynamic-color-circle';
 
-import { StxAvatar } from './stx-avatar';
-
 interface StacksAssetAvatarProps extends BoxProps {
   gradientString?: string;
   imageCanonicalUri?: string;
@@ -15,15 +15,20 @@ export function StacksAssetAvatar({
   gradientString,
   imageCanonicalUri,
   isStx,
-  size = '40',
+  size = '36',
   ...props
 }: StacksAssetAvatarProps) {
-  if (isStx) return <StxAvatar />;
+  if (isStx) return <StxAvatarIcon />;
 
   const { color } = props;
 
   if (imageCanonicalUri)
-    return <img height={`${size}px`} width={`${size}px`} src={encodeURI(imageCanonicalUri)} />;
+    return (
+      <Avatar.Root>
+        <Avatar.Image alt="FT" src={encodeURI(imageCanonicalUri)} />
+        <Avatar.Fallback delayMs={defaultFallbackDelay}>FT</Avatar.Fallback>
+      </Avatar.Root>
+    );
 
   if (!gradientString) return null;
 

src/app/components/crypto-assets/stacks/fungible-token-asset/stacks-fungible-token-asset-item.layout.tsx

@@ -21,7 +21,7 @@ export function StacksFungibleTokenAssetItemLayout({
     parseStacksFungibleTokenAssetBalance(assetBalance);
 
   return (
-    <ItemInteractive data-testid={dataTestId} onClick={onClick}>
+    <ItemInteractive data-testid={dataTestId} onClick={onClick} my="space.02">
       <ItemLayout
         flagImg={
           <StacksAssetAvatar

src/app/components/error-label.tsx

@@ -8,6 +8,7 @@ export function ErrorLabel({ children, ...rest }: FlagProps) {
       spacing="space.02"
       color="red.action-primary-default"
       textStyle="body.02"
+      textAlign="left"
       {...rest}
     >
       {children}

src/app/components/fees-row/components/fees-row.layout.tsx

@@ -3,7 +3,7 @@ import { HStack, HstackProps, styled } from 'leather-styles/jsx';
 
 import { openInNewTab } from '@app/common/utils/open-in-new-tab';
 import { SponsoredLabel } from '@app/components/sponsored-label';
-import { WarningLabel } from '@app/components/warning-label';
+import { Callout } from '@app/ui/components/callout/callout';
 import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip';
 import { InfoCircleIcon } from '@app/ui/icons/info-circle-icon';
 
@@ -42,7 +42,11 @@ export function FeesRowLayout(props: FeesRowLayoutProps) {
         {feeField}
       </HStack>
       {isSponsored && <SponsoredLabel />}
-      {!meta.error && fieldWarning && <WarningLabel width="100%">{fieldWarning}</WarningLabel>}
+      {!meta.error && fieldWarning && (
+        <Callout variant="warning" width="100%">
+          {fieldWarning}
+        </Callout>
+      )}
     </HStack>
   );
 }

src/app/components/inscription-preview-card/components/inscription-preview.tsx

@@ -2,7 +2,7 @@ import { BoxProps, Flex } from 'leather-styles/jsx';
 
 import { SupportedInscription } from '@shared/models/inscription.model';
 
-import { OrdinalIcon } from '@app/ui/components/avatar-icon/ordinal-icon';
+import { OrdinalAvatarIcon } from '@app/ui/components/avatar/ordinal-avatar-icon';
 
 import { InscriptionImage } from './inscription-image';
 import { InscriptionPreviewContainer } from './inscription-preview-container';
@@ -31,7 +31,7 @@ export function InscriptionPreview({ inscription, ...props }: InscriptionPreview
       return (
         <InscriptionPreviewContainer {...props}>
           <Flex alignItems="center" height="100%" justifyContent="center">
-            <OrdinalIcon width="40px" />
+            <OrdinalAvatarIcon size="xl" />
           </Flex>
         </InscriptionPreviewContainer>
       );