feat: merged dev updates

.github/workflows/build-extension.yml

@@ -13,12 +13,13 @@ jobs:
   set-in-progress-message:
     if: github.repository == 'leather-wallet/extension' && github.actor != 'dependabot[bot]'
     runs-on: ubuntu-latest
-    needs:
-      - pre-run
     steps:
+      - name: Make short commit SHA
+        run: echo "SHORT_SHA=`echo ${{ github.event.pull_request.head.sha }} | cut -c1-7`" >> $GITHUB_ENV
+
       - uses: kyranjamie/[email protected]
         with:
-          header: '> _Building Leather…_'
+          header: '> _Building Leather at commit `${{ env.SHORT_SHA }}`_'
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
   build:
@@ -29,28 +30,27 @@ jobs:
     strategy:
       matrix:
         target: [chromium, firefox]
-    env:
-      WALLET_ENVIRONMENT: feature
-      TARGET_BROWSER: ${{ matrix.target }}
-      COINBASE_APP_ID: ${{ secrets.COINBASE_APP_ID }}
-      MOONPAY_API_KEY: ${{ secrets.MOONPAY_API_KEY }}
-      SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
-      SEGMENT_WRITE_KEY: ${{ secrets.SEGMENT_WRITE_KEY_STAGING }}
-      TRANSAK_API_KEY: ${{ secrets.TRANSAK_API_KEY }}
-      PR_NUMBER: ${{ github.event.number }}
-      COMMIT_SHA: ${{ github.event.pull_request.head.sha }}
     steps:
       - uses: actions/checkout@v4
         with:
           ref: ${{ github.event.pull_request.head.sha }}
 
       - uses: ./.github/actions/provision
 
-      - name: Add SHORT_SHA env property with commit short sha
-        run: echo "SHORT_SHA=`echo ${GITHUB_SHA} | cut -c1-8`" >> $GITHUB_ENV
+      - run: echo "SHORT_SHA=`echo ${{ github.event.pull_request.head.sha }} | cut -c1-7`" >> $GITHUB_ENV
 
       - name: Build project
         run: yarn build
+        env:
+          WALLET_ENVIRONMENT: feature
+          TARGET_BROWSER: ${{ matrix.target }}
+          COINBASE_APP_ID: ${{ secrets.COINBASE_APP_ID }}
+          MOONPAY_API_KEY: ${{ secrets.MOONPAY_API_KEY }}
+          SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
+          SEGMENT_WRITE_KEY: ${{ secrets.SEGMENT_WRITE_KEY_STAGING }}
+          TRANSAK_API_KEY: ${{ secrets.TRANSAK_API_KEY }}
+          PR_NUMBER: ${{ github.event.number }}
+          COMMIT_SHA: ${{ env.SHORT_SHA }}
 
       - uses: actions/upload-artifact@v3
         name: Upload ${{ matrix.target }} Extension Zip

CHANGELOG.md

@@ -1,3 +1,52 @@
+## [6.12.0](https://github.com/leather-wallet/extension/compare/v6.11.0...v6.12.0) (2023-10-24)
+
+
+### Features
+
+* add connect btn ([3903ba1](https://github.com/leather-wallet/extension/commit/3903ba17f208cde8eeb1f13dd30c66eb7b2e3b64))
+* add unsupported browsers modal ([2febd49](https://github.com/leather-wallet/extension/commit/2febd494ce016dbbed1690105c7d019ed69d8fb7))
+* added bitcoin contract list page and entry point ([a28678d](https://github.com/leather-wallet/extension/commit/a28678d32b73de0444e9154b727d07c5d8d668c0))
+* added tests for bitcoin contract request ([157f97e](https://github.com/leather-wallet/extension/commit/157f97e9c5ff4ec0788adfc1076c4dd5745bf035))
+* return addresses of regtest and signet ([a0717e3](https://github.com/leather-wallet/extension/commit/a0717e38887e30ed32eb9d08f7be81a2dec105a9))
+* rework onboarding ledger flow, closes [#4281](https://github.com/leather-wallet/extension/issues/4281) ([47aa2e2](https://github.com/leather-wallet/extension/commit/47aa2e2598bbcdd8230f8ef6701bbe252a811bb4))
+
+
+### Bug Fixes
+
+* align text and caption left so it appears correctly in extension view ([bd25751](https://github.com/leather-wallet/extension/commit/bd25751a97dbabbd6cf41a90680e519adbe91ef8))
+* allow direct access to /receive/stx ([e7c8d8d](https://github.com/leather-wallet/extension/commit/e7c8d8decf577e85d57abc2cb8de49a894b42690))
+* change acc bug ([ce13789](https://github.com/leather-wallet/extension/commit/ce1378926dd30d7b7ff92d539942830bfc1ec80f))
+* clean code ([77a4822](https://github.com/leather-wallet/extension/commit/77a4822075b66ac168952802dc4193c1dbd4d89b))
+* clean code, add note re ordinals modal ([a06aa39](https://github.com/leather-wallet/extension/commit/a06aa39eaca8312b7215055308892a307e82d194))
+* clean code, add note re ordinals modal ([993df34](https://github.com/leather-wallet/extension/commit/993df34892f2bbc5fc7d10ab2c47c49aff211c46))
+* close original recieve modal before opening qr code modal to prevent double modal ([10b7246](https://github.com/leather-wallet/extension/commit/10b72461f6af2958c0408d6265fc10aa68eb46ed))
+* code spanning past viewport width ([db35a49](https://github.com/leather-wallet/extension/commit/db35a4932e1034e28c2f54c97d88b5c7bdccffd0))
+* do not nest recieve sub routes to prevent double overlay of modal and maintain direct access ([1477c96](https://github.com/leather-wallet/extension/commit/1477c96270495898b90e6ef8c8c38075df66fa6e))
+* enable bg redirect to overlay modal in new tab ([36c969f](https://github.com/leather-wallet/extension/commit/36c969f2f009b785958866720567204fcd0b21c9))
+* get build passing ([5826143](https://github.com/leather-wallet/extension/commit/5826143c95a360c1696a1f6fd41c2023a7f67e5d))
+* improve type loading ([d79ee62](https://github.com/leather-wallet/extension/commit/d79ee626f994d05922427d066669529798be4ebf))
+* ledger tx sign error process ([618923f](https://github.com/leather-wallet/extension/commit/618923fc0cc964b5c9e0534e343a30ca0d58dbd1))
+* pass child routes as children to appease dep cruiser ([200907a](https://github.com/leather-wallet/extension/commit/200907abda5dcdbe3b51f69ebb9c7fcb10f320d0))
+* re-introduce bg location for hometabs so modals overlay on top of activity ([12571b0](https://github.com/leather-wallet/extension/commit/12571b020b35e2fd943c138fb0f10ad0df510a24))
+* refactor modals to overlay on top of backgroundLocation consistently, closes [#4028](https://github.com/leather-wallet/extension/issues/4028) ([c006894](https://github.com/leather-wallet/extension/commit/c006894e14f6ad26e9f3f4c978a73999fbc6b834))
+* revert drawer changes from brand audit, closes [#4249](https://github.com/leather-wallet/extension/issues/4249) ([e437710](https://github.com/leather-wallet/extension/commit/e437710d3dc6ab7bbe7dfae4eaadef25c33ba2a3))
+* update path to receive stx to fix test ([2c897ab](https://github.com/leather-wallet/extension/commit/2c897abaff7dd17c7b63b6daaf98acf32282086d))
+* use bg location to open in new tab. share modal bg logic ([07c5c98](https://github.com/leather-wallet/extension/commit/07c5c98100d6a81399d6b3f402f7d569b385a5b8))
+* use grid for asset rows to stop overflow while allowing width, closes [#4171](https://github.com/leather-wallet/extension/issues/4171) ([529c03d](https://github.com/leather-wallet/extension/commit/529c03d9b1c9cdf9473c5343c0593f615ac4b7f2))
+* use independant route for FundReceiveStx ([e4bfd24](https://github.com/leather-wallet/extension/commit/e4bfd24a61350d28d99a53864f2572ff74b9d934))
+* use network.chain.bitcoin.url in api hooks, closes [#4330](https://github.com/leather-wallet/extension/issues/4330) ([ceaf228](https://github.com/leather-wallet/extension/commit/ceaf228cf9052032e26d6deb107c3ec6f5ad7672))
+* wallet type definition ([ddc91e3](https://github.com/leather-wallet/extension/commit/ddc91e36669a44d60ea886acbf661063b09ef066))
+* welcome page header padding, closes [#4374](https://github.com/leather-wallet/extension/issues/4374) ([0817a5e](https://github.com/leather-wallet/extension/commit/0817a5ed4599d6b94663e38a603ff92470ffaf69))
+
+
+### Internal
+
+* debug window close util ([77056e7](https://github.com/leather-wallet/extension/commit/77056e7fcc947ba15542f66f59fc4200187fb099))
+* deprecate unused routes ([a3710c5](https://github.com/leather-wallet/extension/commit/a3710c5d53e1fc7ec813810ad132fec5bd4b1f1b))
+* explore routing issues ([0dbbdcf](https://github.com/leather-wallet/extension/commit/0dbbdcf3d9029f5a02c74fa0dfcccaa813ea8139))
+* local copyToClipboard hook ([017fa3a](https://github.com/leather-wallet/extension/commit/017fa3a56b6374fcc9241f02ea06b142f989c14c))
+* psbt stackui layout ([e71e457](https://github.com/leather-wallet/extension/commit/e71e4576714abecfabdc4ea5f56ed15cebd743b6))
+
 ## [6.11.0](https://github.com/leather-wallet/extension/compare/v6.10.0...v6.11.0) (2023-10-13)
 
 

package.json

@@ -2,7 +2,7 @@
   "name": "@stacks/wallet-web",
   "description": "Leather is browser extension for interacting with Stacks apps",
   "private": true,
-  "version": "6.11.0",
+  "version": "6.12.0",
   "author": "Hiro Systems PBC",
   "scripts": {
     "dev": "concurrently --raw \"node webpack/dev-server.js\" \"redux-devtools --hostname=localhost --port=8000\"",
@@ -168,6 +168,7 @@
     "@typescript-eslint/eslint-plugin": "6.7.4",
     "@vkontakte/vk-qr": "2.0.13",
     "@zondax/ledger-stacks": "1.0.4",
+    "alex-sdk": "0.1.22",
     "are-passive-events-supported": "1.1.1",
     "argon2-browser": "1.18.0",
     "assert": "2.0.0",

src/app/common/error-messages.ts

@@ -13,7 +13,7 @@ export enum FormErrorMessages {
   InsufficientFunds = 'Insufficient funds',
   MemoExceedsLimit = 'Memo must be less than 34-bytes',
   MustBeNumber = 'Amount must be a number',
-  MustBePositive = 'Amount must be positive',
+  MustBePositive = 'Amount must be greater than zero',
   MustSelectAsset = 'Select a valid token to transfer',
   SameAddress = 'Cannot send to yourself',
   TooMuchPrecision = 'Token can only have {decimals} decimals',

src/app/common/hooks/use-bitcoin-contracts.ts

@@ -310,7 +310,7 @@ export function useBitcoinContracts() {
     const txMoney = createMoneyFromDecimal(bitcoinValue, 'BTC');
     const txFiatValue = i18nFormatCurrency(calculateFiatValue(txMoney)).toString();
     const txFiatValueSymbol = bitcoinMarketData.price.symbol;
-    const txLink = { blockchain: 'bitcoin', txid: txId };
+    const txLink = { blockchain: 'bitcoin', txId };
 
     return {
       txId,

src/app/common/hooks/use-convert-to-fiat-amount.ts

@@ -1,6 +1,7 @@
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
 
 import { CryptoCurrencies } from '@shared/models/currencies.model';
+import { createMarketData, createMarketPair } from '@shared/models/market.model';
 import type { Money } from '@shared/models/money.model';
 
 import { useCryptoCurrencyMarketData } from '@app/query/common/market-data/market-data.hooks';
@@ -15,3 +16,15 @@ export function useConvertCryptoCurrencyToFiatAmount(currency: CryptoCurrencies)
     [cryptoCurrencyMarketData]
   );
 }
+
+export function useConvertAlexSdkCurrencyToFiatAmount(currency: CryptoCurrencies, price: Money) {
+  const alexCurrencyMarketData = useMemo(
+    () => createMarketData(createMarketPair(currency, 'USD'), price),
+    [currency, price]
+  );
+
+  return useCallback(
+    (value: Money) => baseCurrencyAmountInQuote(value, alexCurrencyMarketData),
+    [alexCurrencyMarketData]
+  );
+}

src/app/common/hooks/use-explorer-link.ts

@@ -10,13 +10,13 @@ import { openInNewTab } from '../utils/open-in-new-tab';
 export interface HandleOpenTxLinkArgs {
   blockchain: Blockchains;
   suffix?: string;
-  txid: string;
+  txId: string;
 }
 export function useExplorerLink() {
   const { mode } = useCurrentNetworkState();
   const handleOpenTxLink = useCallback(
-    ({ blockchain, suffix, txid }: HandleOpenTxLinkArgs) =>
-      openInNewTab(makeTxExplorerLink({ blockchain, mode, suffix, txid })),
+    ({ blockchain, suffix, txId }: HandleOpenTxLinkArgs) =>
+      openInNewTab(makeTxExplorerLink({ blockchain, mode, suffix, txId })),
     [mode]
   );
 

src/app/common/hooks/use-loading.ts

@@ -1,10 +1,10 @@
 import { useLoadingState } from '@app/store/ui/ui.hooks';
 
 export enum LoadingKeys {
-  CONFIRM_DRAWER = 'loading/CONFIRM_DRAWER',
   INCREASE_FEE_DRAWER = 'loading/INCREASE_FEE_DRAWER',
-  SUBMIT_TRANSACTION = 'loading/SUBMIT_TRANSACTION',
-  SUBMIT_SIGNATURE = 'loading/SUBMIT_SIGNATURE',
+  SUBMIT_SEND_FORM_TRANSACTION = 'loading/SUBMIT_SEND_FORM_TRANSACTION',
+  SUBMIT_SWAP_TRANSACTION = 'loading/SUBMIT_SWAP_TRANSACTION',
+  SUBMIT_TRANSACTION_REQUEST = 'loading/SUBMIT_TRANSACTION_REQUEST',
 }
 
 export function useLoading(key: string) {

src/app/common/math/helpers.ts

@@ -1,7 +1,10 @@
 import BigNumber from 'bignumber.js';
 
-export function initBigNumber(num: string | number | BigNumber) {
-  return BigNumber.isBigNumber(num) ? num : new BigNumber(num);
+import { isBigInt } from '@shared/utils';
+
+export function initBigNumber(num: string | number | BigNumber | bigint) {
+  if (BigNumber.isBigNumber(num)) return num;
+  return isBigInt(num) ? new BigNumber(num.toString()) : new BigNumber(num);
 }
 
 export function sumNumbers(nums: number[]) {

src/app/common/money/calculate-money.ts

@@ -1,10 +1,10 @@
 import { BigNumber } from 'bignumber.js';
 
 import { MarketData, formatMarketPair } from '@shared/models/market.model';
-import { Money, createMoney } from '@shared/models/money.model';
+import { Money, NumType, createMoney } from '@shared/models/money.model';
 import { isNumber } from '@shared/utils';
 
-import { sumNumbers } from '../math/helpers';
+import { initBigNumber, sumNumbers } from '../math/helpers';
 import { formatMoney } from './format-money';
 import { isMoney } from './is-money';
 
@@ -31,6 +31,14 @@ export function convertAmountToFractionalUnit(num: Money | BigNumber, decimals?:
   return num.shiftedBy(decimals);
 }
 
+export function convertToMoneyTypeWithDefaultOfZero(
+  symbol: string,
+  num?: NumType,
+  decimals?: number
+) {
+  return createMoney(initBigNumber(num ?? 0), symbol.toUpperCase(), decimals);
+}
+
 // ts-unused-exports:disable-next-line
 export function convertAmountToBaseUnit(num: Money | BigNumber, decimals?: number) {
   if (isMoney(num)) return num.amount.shiftedBy(-num.decimals);

src/app/common/transactions/stacks/transaction.utils.ts

@@ -2,6 +2,7 @@ import { bytesToHex } from '@stacks/common';
 import { TransactionTypes } from '@stacks/connect';
 import {
   CoinbaseTransaction,
+  NetworkBlockTimesResponse,
   TransactionEventFungibleAsset,
 } from '@stacks/stacks-blockchain-api-types';
 import {
@@ -126,3 +127,16 @@ export function getTxSenderAddress(tx: StacksTransaction): string | undefined {
   );
   return txSender;
 }
+
+export function getEstimatedConfirmationTime(
+  isTestnet: boolean,
+  blockTime?: NetworkBlockTimesResponse
+) {
+  const arrivesIn = isTestnet
+    ? blockTime?.testnet.target_block_time
+    : blockTime?.mainnet.target_block_time;
+
+  if (!arrivesIn) return '~10 – 20 min';
+
+  return `~${arrivesIn / 60} min`;
+}

src/app/common/utils.ts

@@ -44,19 +44,19 @@ interface MakeTxExplorerLinkArgs {
   blockchain: Blockchains;
   mode: BitcoinNetworkModes;
   suffix?: string;
-  txid: string;
+  txId: string;
 }
 export function makeTxExplorerLink({
   blockchain,
   mode,
   suffix = '',
-  txid,
+  txId,
 }: MakeTxExplorerLinkArgs) {
   switch (blockchain) {
     case 'bitcoin':
-      return `https://mempool.space/${mode !== 'mainnet' ? mode + '/' : ''}tx/${txid}`;
+      return `https://mempool.space/${mode !== 'mainnet' ? mode + '/' : ''}tx/${txId}`;
     case 'stacks':
-      return `https://explorer.hiro.so/txid/${txid}?chain=${mode}${suffix}`;
+      return `https://explorer.hiro.so/txid/${txId}?chain=${mode}${suffix}`;
     default:
       return '';
   }

src/app/components/bitcoin-contract-entry-point/bitcoin-contract-entry-point-layout.tsx

@@ -11,7 +11,7 @@ import { Flag } from '@app/components/layout/flag';
 import { Tooltip } from '@app/components/tooltip';
 import { Caption, Text } from '@app/components/typography';
 
-import { SmallLoadingSpinner } from '../loading-spinner';
+import { LoadingSpinner } from '../loading-spinner';
 
 interface BitcoinContractEntryPointLayoutProps extends StackProps {
   balance: Money;
@@ -48,7 +48,7 @@ export const BitcoinContractEntryPointLayout = forwardRefWithAs(
                 fontVariantNumeric="tabular-nums"
                 textAlign="right"
               >
-                {isLoading ? <SmallLoadingSpinner /> : formattedBalance.value}
+                {isLoading ? <LoadingSpinner size="sm" /> : formattedBalance.value}
               </Text>
             </Tooltip>
           </HStack>

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

@@ -79,7 +79,7 @@ export function BitcoinTransactionItem({ transaction, ...rest }: BitcoinTransact
     }
     handleOpenTxLink({
       blockchain: 'bitcoin',
-      txid: transaction?.txid || '',
+      txId: transaction?.txid || '',
     });
   };
 

src/app/components/generic-error/generic-error.layout.tsx

@@ -1,7 +1,6 @@
 import { ReactNode } from 'react';
 
 import GenericError from '@assets/images/generic-error.png';
-import { Box, Text, color } from '@stacks/ui';
 import { Flex, FlexProps, HStack, styled } from 'leather-styles/jsx';
 
 import { openInNewTab } from '@app/common/utils/open-in-new-tab';
@@ -22,16 +21,8 @@ export function GenericErrorLayout(props: GenericErrorProps) {
   const { body, helpTextList, onClose, title, ...rest } = props;
 
   return (
-    <Flex
-      alignItems="center"
-      flexDirection="column"
-      px={['space.05', 'space.05', 'unset']}
-      width="100%"
-      {...rest}
-    >
-      <Box mt="loose">
-        <img src={GenericError} width="106px" />
-      </Box>
+    <Flex alignItems="center" flexDirection="column" px="space.05" width="100%" {...rest}>
+      <styled.img src={GenericError} width="106px" height="72px" alt="Error" mt="space.06" />
       <styled.h1 mt="space.05" textStyle="heading.04">
         {title}
       </styled.h1>
@@ -44,32 +35,30 @@ export function GenericErrorLayout(props: GenericErrorProps) {
       >
         {body}
       </styled.h2>
-      <Box
-        as="ul"
-        border="2px solid #EFEFF2"
-        borderRadius="12px"
-        color={color('text-caption')}
+      <styled.ul
+        border="default"
+        borderRadius="10px"
         fontSize="14px"
         lineHeight="1.6"
         listStyleType="circle"
-        mt="extra-loose"
-        pb="loose"
+        mt="space.06"
+        pb="space.05"
         pl="40px"
-        pr="loose"
-        pt="tight"
+        pr="space.05"
+        pt="space.02"
         textAlign="left"
         width="100%"
       >
         {helpTextList}
-        <Box as="li" mt="base" textAlign="left">
+        <styled.li mt="space.04" textAlign="left">
           <HStack alignItems="center">
-            <Text>Reach out to our support team</Text>
-            <Box as="button" onClick={() => openInNewTab(supportUrl)}>
+            <styled.span textStyle="label.02">Reach out to our support team</styled.span>
+            <styled.button onClick={() => openInNewTab(supportUrl)}>
               <ExternalLinkIcon />
-            </Box>
+            </styled.button>
           </HStack>
-        </Box>
-      </Box>
+        </styled.li>
+      </styled.ul>
       <LeatherButton fontSize="14px" mt="space.05" onClick={onClose} variant="link">
         Close window
       </LeatherButton>