feat/upgrade-package

app/api/api.ts

@@ -15,8 +15,8 @@ import {
   CoreNodePoxResponse,
   CoreNodeInfoResponse,
   NetworkBlockTimesResponse,
-} from '@blockstack/stacks-blockchain-api-types';
-import { AddressTransactionsWithTransfersListResponse } from '@stacks/stacks-blockchain-api-types';
+  AddressTransactionsWithTransfersListResponse,
+} from '@stacks/stacks-blockchain-api-types';
 import packageJson from '../../package.json';
 
 const defaultHeaders = [

app/components/home/delegation-card.tsx

@@ -89,9 +89,7 @@ export const DelegationCard: FC = () => {
               </Row>
               <Row>
                 <Label>Progress</Label>
-                <Value>
-                  {stackerInfo?.stackingPercentage ? stackerInfo?.stackingPercentage : '0'}%
-                </Value>
+                <Value>{stackerInfo?.stackingPercentage ?? 0}%</Value>
               </Row>
             </Section>
 

app/components/home/transaction-list/mempool-tx-label.ts

@@ -1,4 +1,4 @@
-import { MempoolTransaction } from '@blockstack/stacks-blockchain-api-types';
+import { MempoolTransaction } from '@stacks/stacks-blockchain-api-types';
 import { isStackingTx, isDelegateStxTx, isRevokingDelegationTx } from '@utils/tx-utils';
 
 export function getMempoolTxLabel(tx: MempoolTransaction, address: string, contractId: string) {

app/components/home/transaction-list/transaction-list-context-menu.ts

@@ -1,4 +1,4 @@
-import { Transaction } from '@blockstack/stacks-blockchain-api-types';
+import { Transaction } from '@stacks/stacks-blockchain-api-types';
 
 import { hasMemo, getRecipientAddress } from '@utils/tx-utils';
 import { features } from '../../../constants/index';

app/components/home/transaction-list/transaction-list-empty.tsx

@@ -1,14 +1,24 @@
 import React from 'react';
-import { Text, Flex } from '@stacks/ui';
+import { Text, Flex, Box, color } from '@stacks/ui';
 
+import { EmptyTxList } from '@components/icons/empty-tx-list';
 import { useNavigatorOnline } from '@hooks/use-navigator-online';
 import { templateTxBoxProps } from './transaction-list-item-pseudo';
 
 export const TransactionListEmpty = () => {
   const { isOnline } = useNavigatorOnline();
   return (
     <Flex {...templateTxBoxProps}>
-      <Text textStyle="body.small" display="block" textAlign="center" mb="tight">
+      <Box maxWidth="180px" mb="loose">
+        <EmptyTxList />
+      </Box>
+      <Text
+        color={color('text-caption')}
+        textStyle="body.small"
+        display="block"
+        textAlign="center"
+        mb="tight"
+      >
         {isOnline
           ? `You haven't made any transactions yet`
           : `Cannot fetch transactions. Ensure you're connected to the internet`}

app/components/home/transaction-list/transaction-list-item-mempool.tsx

@@ -1,7 +1,7 @@
 import React, { FC, useRef, useEffect, MutableRefObject } from 'react';
 import { useHover, useFocus } from 'use-events';
 import { Box, color, Flex, Stack, Text } from '@stacks/ui';
-import { MempoolTransaction } from '@blockstack/stacks-blockchain-api-types';
+import { MempoolTransaction } from '@stacks/stacks-blockchain-api-types';
 import { getTxTypeName } from '@stacks/ui-utils';
 
 import { toHumanReadableStx } from '@utils/unit-convert';

app/constants/index.ts

@@ -62,13 +62,15 @@ export const REVOKE_DELEGATION_TX_SIZE_BYTES = 165;
 
 export const STACKING_CONTRACT_CALL_FEE = 260;
 
-export const POOLED_STACKING_TX_SIZE_BYTES = 199;
+export const POOLED_STACKING_TX_SIZE_BYTES = 216;
 
 export const SUPPORTED_BTC_ADDRESS_FORMATS = ['p2pkh', 'p2sh'] as const;
 
-export const SUPPORTED_LEDGER_VERSION_MAJOR = 0;
+export const LATEST_LEDGER_VERSION_MAJOR = 0;
 
-export const SUPPORTED_LEDGER_VERSION_MINOR = 11;
+export const LATEST_LEDGER_VERSION_MINOR = 14;
+
+export const EARLIEST_SUPPORTED_LEDGER_VERSION = '0.11.0';
 
 export const DEFAULT_POLLING_INTERVAL = 10_000;
 

app/hooks/use-mempool.ts

@@ -5,7 +5,7 @@ import { useQuery } from 'react-query';
 import { selectAddress } from '@store/keys';
 import { ApiResource } from '@models';
 import { useFetchAccountNonce } from '@hooks/use-fetch-account-nonce';
-import { MempoolTransaction } from '@blockstack/stacks-blockchain-api-types';
+import { MempoolTransaction } from '@stacks/stacks-blockchain-api-types';
 import { useApi } from './use-api';
 
 interface UseMempool {

app/hooks/use-prepare-ledger.ts

@@ -1,12 +1,15 @@
 import { useEffect, useMemo, useState } from 'react';
 import { LedgerError } from '@zondax/ledger-blockstack';
+import compareVersions from 'compare-versions';
 import { Observable } from 'rxjs';
 import { filter } from 'rxjs/operators';
-import { SUPPORTED_LEDGER_VERSION_MAJOR, SUPPORTED_LEDGER_VERSION_MINOR } from '@constants/index';
 
+import { EARLIEST_SUPPORTED_LEDGER_VERSION } from '@constants/index';
+import { isTestnet } from '@utils/network-utils';
 import type { LedgerMessageEvents } from '../main/register-ledger-listeners';
 import { useListenLedgerEffect } from './use-listen-ledger-effect';
 import { messages$ } from './use-message-events';
+import { useCheckForUpdates } from './use-check-for-updates';
 
 export enum LedgerConnectStep {
   Disconnected,
@@ -29,22 +32,43 @@ export function usePrepareLedger() {
   const [step, setStep] = useState<LedgerConnectStep>(LedgerConnectStep.Disconnected);
   const [isLocked, setIsLocked] = useState(false);
   const [appVersion, setAppVersion] = useState<AppVersion | null>(null);
+  const { isNewerReleaseAvailable } = useCheckForUpdates();
+
+  const versionSupportsTestnetLedger = useMemo(() => {
+    if (appVersion === null) return false;
+    return appVersion.major >= 0 && appVersion.minor > 11;
+  }, [appVersion]);
 
   const isSupportedAppVersion = useMemo(() => {
     if (appVersion === null) return true;
-    return (
-      appVersion.major === SUPPORTED_LEDGER_VERSION_MAJOR &&
-      appVersion.minor === SUPPORTED_LEDGER_VERSION_MINOR
-    );
-  }, [appVersion]);
+    if (!versionSupportsTestnetLedger && isTestnet()) return false;
+    const { major, minor, patch } = appVersion;
+    const currentVersion = `${major}.${minor}.${patch}`;
+    return compareVersions.compare(currentVersion, EARLIEST_SUPPORTED_LEDGER_VERSION, '>=');
+  }, [appVersion, versionSupportsTestnetLedger]);
 
   const appVersionErrorText = useMemo(() => {
+    if (!versionSupportsTestnetLedger && isTestnet()) {
+      return `Cannot use Ledger on testnet with app version 0.11.0 or lower. Upgrade on Ledger Live.`;
+    }
     return `
-      Make sure to upgrade your Stacks app to the latest version in Ledger Live.
-      This version of the Stacks Wallet only works with ${SUPPORTED_LEDGER_VERSION_MAJOR}.${SUPPORTED_LEDGER_VERSION_MINOR}.
-      Detected version ${String(appVersion?.major)}.${String(appVersion?.minor)}
+      Make sure to upgrade your Stacks app to the latest version in Ledger Live. ${
+        isNewerReleaseAvailable
+          ? 'You should also upgrade your Stacks Wallet to the latest version.'
+          : ''
+      }
+      This version of the Stacks Wallet works with ${EARLIEST_SUPPORTED_LEDGER_VERSION} onwards.
+      Detected version ${String(appVersion?.major)}.${String(appVersion?.minor)}.${String(
+      appVersion?.patch
+    )}
     `;
-  }, [appVersion]);
+  }, [
+    appVersion?.major,
+    appVersion?.minor,
+    appVersion?.patch,
+    isNewerReleaseAvailable,
+    versionSupportsTestnetLedger,
+  ]);
 
   useListenLedgerEffect();
 

app/hooks/use-transaction-list.ts

@@ -1,7 +1,7 @@
 import { useCallback, useMemo, useRef } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import * as R from 'ramda';
-import { MempoolTransaction } from '@blockstack/stacks-blockchain-api-types';
+import { MempoolTransaction } from '@stacks/stacks-blockchain-api-types';
 import { useSelector } from 'react-redux';
 import { RootState } from '@store/index';
 import { selectTransactionList } from '@store/transaction';

app/main/ledger-actions.ts

@@ -1,12 +1,21 @@
 import Transport from '@ledgerhq/hw-transport';
+import { AddressVersion } from '@stacks/transactions';
 import StacksApp, { LedgerError, ResponseAddress, ResponseSign } from '@zondax/ledger-blockstack';
 
+const chainIdMap = {
+  mainnet: AddressVersion.MainnetSingleSig,
+  testnet: AddressVersion.TestnetSingleSig,
+};
+
 const STX_DERIVATION_PATH = `m/44'/5757'/0'/0/0`;
 
 export async function ledgerRequestStxAddress(transport: Transport | null) {
   if (!transport) throw new Error('No device transport');
   const stacksApp = new StacksApp(transport);
-  const resp = await stacksApp.showAddressAndPubKey(STX_DERIVATION_PATH);
+  const resp = await stacksApp.showAddressAndPubKey(
+    STX_DERIVATION_PATH,
+    chainIdMap[process.env.STX_NETWORK as keyof typeof chainIdMap]
+  );
   if (resp.publicKey) {
     return { ...resp, publicKey: resp.publicKey.toString('hex') };
   }
@@ -16,7 +25,10 @@ export async function ledgerRequestStxAddress(transport: Transport | null) {
 export async function ledgerShowStxAddress(transport: Transport | null) {
   if (!transport) throw new Error('No device transport');
   const stacksApp = new StacksApp(transport);
-  const resp = await stacksApp.getAddressAndPubKey(STX_DERIVATION_PATH);
+  const resp = await stacksApp.getAddressAndPubKey(
+    STX_DERIVATION_PATH,
+    chainIdMap[process.env.STX_NETWORK as keyof typeof chainIdMap]
+  );
   return resp;
 }
 

app/modals/components/transaction-error.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { PostCoreNodeTransactionsError } from '@blockstack/stacks-blockchain-api-types';
+import { PostCoreNodeTransactionsError } from '@stacks/stacks-blockchain-api-types';
 
 import { TxModalButton, TxModalFooter } from '@modals/send-stx/send-stx-modal-layout';
 import { FailedBroadcastError } from '@modals/send-stx/steps/failed-broadcast-error';

app/modals/delegated-stacking/delegated-stacking-modal.tsx

@@ -19,7 +19,7 @@ import { useBroadcastTx } from '@hooks/use-broadcast-tx';
 import { ContractCallOptions, StacksTransaction } from '@stacks/transactions';
 import { useMempool } from '@hooks/use-mempool';
 
-import { PostCoreNodeTransactionsError } from '@blockstack/stacks-blockchain-api-types';
+import { PostCoreNodeTransactionsError } from '@stacks/stacks-blockchain-api-types';
 
 import { TxSigningModal } from '@modals/tx-signing-modal/tx-signing-modal';
 

app/modals/receive-stx/components/reveal-stx-address-ledger.tsx

@@ -10,9 +10,11 @@ import { RootState } from '@store/index';
 import { AddressDisplayer } from './address-displayer';
 import { SevereWarning } from '@components/severe-warning';
 import { LedgerConnectStep, usePrepareLedger } from '@hooks/use-prepare-ledger';
+import { ErrorLabel } from '@components/error-label';
+import { ErrorText } from '@components/error-text';
 
 export const RevealStxAddressLedger: FC = () => {
-  const { step, isLocked } = usePrepareLedger();
+  const { step, isLocked, isSupportedAppVersion, appVersionErrorText } = usePrepareLedger();
   const [address, setAddress] = useState<null | string>(null);
   const [success, setSuccess] = useState(false);
   const [pendingLedgerAction, setPendingLedgerAction] =
@@ -82,6 +84,11 @@ export const RevealStxAddressLedger: FC = () => {
           </Stack>
         </Flex>
       )}
+      {!isSupportedAppVersion && (
+        <ErrorLabel my="base-loose">
+          <ErrorText>{appVersionErrorText}</ErrorText>
+        </ErrorLabel>
+      )}
       <Box>
         {pendingLedgerAction === 'pending' && address && (
           <Flex mb="base">

app/modals/receive-stx/receive-stx-modal.tsx

@@ -22,10 +22,11 @@ export const ReceiveStxModal: FC<{ isOpen: boolean }> = memo(({ isOpen }) => {
   return (
     <Modal handleClose={closeModal} minWidth="488px" isOpen={isOpen}>
       <ModalHeader onSelectClose={closeModal}>Receive STX</ModalHeader>
-      {whenWallet({
-        ledger: <RevealStxAddressLedger />,
-        software: <RevealStxAddressSoftware />,
-      })}
+      {isOpen &&
+        whenWallet({
+          ledger: <RevealStxAddressLedger />,
+          software: <RevealStxAddressSoftware />,
+        })}
       <TxModalFooter>
         <Button
           size="md"

app/modals/revoke-delegation/revoke-delegation-modal.tsx

@@ -4,7 +4,7 @@ import { ContractCallOptions, StacksTransaction } from '@stacks/transactions';
 import { useHotkeys } from 'react-hotkeys-hook';
 
 import { selectPoxInfo } from '@store/stacking';
-import { PostCoreNodeTransactionsError } from '@blockstack/stacks-blockchain-api-types';
+import { PostCoreNodeTransactionsError } from '@stacks/stacks-blockchain-api-types';
 
 import { safeAwait } from '@utils/safe-await';
 import { homeActions } from '@store/home';

app/modals/send-stx/send-stx-modal.tsx

@@ -4,7 +4,7 @@ import { useQueryClient } from 'react-query';
 import { useFormik } from 'formik';
 import * as yup from 'yup';
 import BN from 'bn.js';
-import { PostCoreNodeTransactionsError } from '@blockstack/stacks-blockchain-api-types';
+import { PostCoreNodeTransactionsError } from '@stacks/stacks-blockchain-api-types';
 import { BigNumber } from 'bignumber.js';
 import { Modal } from '@modals/components/base-modal';
 import {

app/modals/send-stx/steps/failed-broadcast-error.tsx

@@ -1,6 +1,6 @@
 import React, { FC } from 'react';
 import { Flex, Box, Text, color } from '@stacks/ui';
-import { PostCoreNodeTransactionsError } from '@blockstack/stacks-blockchain-api-types';
+import { PostCoreNodeTransactionsError } from '@stacks/stacks-blockchain-api-types';
 
 import failedCrossSvg from '../../../assets/images/failed-cross.svg';
 import { ExplainerTooltip } from '@components/tooltip';

app/modals/stacking/stacking-modal.tsx

@@ -16,7 +16,7 @@ import { safeAwait } from '@utils/safe-await';
 import { watchForNewTxToAppear } from '@api/watch-tx-to-appear-in-api';
 import { useBroadcastTx } from '@hooks/use-broadcast-tx';
 import { useMempool } from '@hooks/use-mempool';
-import { PostCoreNodeTransactionsError } from '@blockstack/stacks-blockchain-api-types';
+import { PostCoreNodeTransactionsError } from '@stacks/stacks-blockchain-api-types';
 import { TxSigningModal } from '@modals/tx-signing-modal/tx-signing-modal';
 
 interface StackingModalProps {

app/modals/tx-signing-modal/tx-signing-modal.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
 import { Modal } from '@stacks/ui';
 import BN from 'bn.js';
-import { PostCoreNodeTransactionsError } from '@blockstack/stacks-blockchain-api-types';
+import { PostCoreNodeTransactionsError } from '@stacks/stacks-blockchain-api-types';
 
 import { SignTransaction } from '@components/tx-signing/sign-transaction';
 import { useLatestNonce } from '@hooks/use-latest-nonce';

app/package.json

@@ -12,7 +12,7 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@ledgerhq/hw-transport-node-hid": "5.46.0",
+    "@ledgerhq/hw-transport-node-hid": "6.1.0",
     "@stacks/keychain": "1.4.1",
     "@stacks/network": "1.2.2",
     "@stacks/stacking": "1.4.1",

app/pages/stacking/delegated-stacking/components/delegated-stacking-info-card.tsx

@@ -13,6 +13,8 @@ import { parseNumericalFormInput } from '@utils/form/parse-numerical-form-input'
 import { stxToMicroStx, toHumanReadableStx } from '@utils/unit-convert';
 import { truncateMiddle } from '@utils/tx-utils';
 import { formatCycles } from '@utils/stacking';
+import { useCalculateFee } from '@hooks/use-calculate-fee';
+import { useWalletType } from '@hooks/use-wallet-type';
 import {
   InfoCard,
   InfoCardLabel as Label,
@@ -21,7 +23,8 @@ import {
   InfoCardValue as Value,
   InfoCardSection as Section,
 } from '../../../../components/info-card';
-import { useCalculateFee } from '@hooks/use-calculate-fee';
+import { useSelector } from 'react-redux';
+import { selectPoxInfo } from '@store/stacking';
 
 interface PoolingInfoCardProps extends FlexProps {
   amount: string | number | null;
@@ -35,6 +38,8 @@ export const PoolingInfoCard: FC<PoolingInfoCardProps> = props => {
   const { amount, delegationType, poolStxAddress, durationInCycles, burnHeight, ...rest } = props;
 
   const calcFee = useCalculateFee();
+  const { whenWallet } = useWalletType();
+  const poxInfo = useSelector(selectPoxInfo);
 
   const amountToBeStacked = useMemo(
     () => stxToMicroStx(parseNumericalFormInput(amount)).integerValue(),
@@ -92,11 +97,31 @@ export const PoolingInfoCard: FC<PoolingInfoCardProps> = props => {
               </Label>
               <Value>{poolStxAddress ? truncateMiddle(poolStxAddress) : '—'}</Value>
             </Row>
+            <Row>
+              <Label
+                explainer={whenWallet({
+                  software: undefined,
+                  ledger: `You'll see this contract address come up when signing the transaction on your Ledger device`,
+                })}
+              >
+                Contract
+              </Label>
+              <Value>{truncateMiddle(poxInfo?.contract_id ?? '')}</Value>
+            </Row>
           </Section>
 
           <Section>
             <Row>
-              <Label>Fee</Label>
+              <Label
+                explainer={whenWallet({
+                  software: undefined,
+                  ledger: `This will appear as ${calcFee(
+                    POOLED_STACKING_TX_SIZE_BYTES
+                  ).toString()} µSTX on your Ledger device`,
+                })}
+              >
+                Fee
+              </Label>
               <Value>{toHumanReadableStx(calcFee(POOLED_STACKING_TX_SIZE_BYTES))}</Value>
             </Row>
           </Section>

app/store/address/address.actions.ts

@@ -1,6 +1,6 @@
 import { Dispatch, GetState } from '../index';
 import { createAction } from '@reduxjs/toolkit';
-import { AddressStxBalanceResponse } from '@blockstack/stacks-blockchain-api-types';
+import { AddressStxBalanceResponse } from '@stacks/stacks-blockchain-api-types';
 import { safeAwait } from '@stacks/ui';
 
 import { Api } from '../../api/api';

app/store/address/address.reducer.ts

@@ -1,4 +1,4 @@
-import { AddressStxBalanceResponse } from '@blockstack/stacks-blockchain-api-types';
+import { AddressStxBalanceResponse } from '@stacks/stacks-blockchain-api-types';
 import { createReducer, createSelector } from '@reduxjs/toolkit';
 import BigNumber from 'bignumber.js';