feat: update stacks packages

package.json

@@ -21,14 +21,14 @@
     "@noble/hashes": "1.3.2",
     "@reduxjs/toolkit": "1.9.7",
     "@scure/base": "1.1.3",
-    "@stacks/auth": "6.13.0",
+    "@stacks/auth": "7.0.2",
     "@stacks/blockchain-api-client": "7.3.2",
-    "@stacks/common": "6.8.1",
-    "@stacks/connect": "7.7.0",
-    "@stacks/connect-react": "22.4.0",
-    "@stacks/network": "6.8.1",
-    "@stacks/stacking": "6.13.2",
-    "@stacks/transactions": "6.13.0",
+    "@stacks/common": "7.0.2",
+    "@stacks/connect": "7.9.0",
+    "@stacks/connect-react": "22.6.0",
+    "@stacks/network": "7.0.2",
+    "@stacks/stacking": "7.0.2",
+    "@stacks/transactions": "7.0.2",
     "@stacks/ui": "7.10.0",
     "@stacks/ui-core": "7.3.0",
     "@stacks/ui-theme": "7.5.0",

src/components/add-network-form.tsx

@@ -1,7 +1,7 @@
 import { useNavigate } from 'react-router-dom';
 
 import { Configuration, InfoApi } from '@stacks/blockchain-api-client';
-import { ChainID } from '@stacks/transactions';
+import { ChainId } from '@stacks/network';
 import { Box, Button, FormLabel, Input, Stack } from '@stacks/ui';
 import { Field, FieldProps, Form, Formik, FormikErrors } from 'formik';
 import { string } from 'yup';
@@ -20,11 +20,11 @@ const buildCustomNetworkUrl = (url: string) => {
   return `${hostname === 'localhost' ? 'http://' : 'https://'}${hostname}${port ? `:${port}` : ''}`;
 };
 
-const fetchCustomNetworkId: (url: string) => Promise<ChainID | undefined> = (url: string) => {
+const fetchCustomNetworkId: (url: string) => Promise<ChainId | undefined> = (url: string) => {
   return new InfoApi(new Configuration({ basePath: url }))
     .getCoreApiInfo()
     .then(res =>
-      Object.values(ChainID).includes(res.network_id) ? (res.network_id as ChainID) : undefined
+      Object.values(ChainId).includes(res.network_id) ? (res.network_id as ChainId) : undefined
     )
     .catch();
 };

src/components/blockchain-api-client-provider.tsx

@@ -45,7 +45,7 @@ interface Props {
 }
 export function BlockchainApiClientProvider({ children }: Props) {
   const { network } = useStacksNetwork();
-  const config = new Configuration({ basePath: network.coreApiUrl });
+  const config = new Configuration({ basePath: network.client.baseUrl });
 
   return (
     <Context.Provider

src/components/stacking-client-provider/fetch-fn.ts

@@ -0,0 +1,15 @@
+export async function fetchFn(input: RequestInfo | URL, init?: RequestInit) {
+  const url = input instanceof URL ? input.toString() : input.toString();
+
+  const finalInit = url.includes('hiro.so')
+    ? {
+        ...init,
+        headers: {
+          ...init?.headers,
+          'x-hiro-product': 'Leather',
+        },
+      }
+    : init;
+
+  return await fetch(input, finalInit);
+}

src/components/stacking-client-provider/stacking-client-provider.tsx

@@ -2,7 +2,7 @@ import { ReactNode, createContext, useContext } from 'react';
 
 import { StackingClient } from '@stacks/stacking';
 import {
-  callReadOnlyFunction,
+  fetchCallReadOnlyFunction,
   validateStacksAddress as isValidStacksAddress,
   noneCV,
   principalCV,
@@ -27,11 +27,11 @@ interface Props {
 export function StackingClientProvider({ children }: Props) {
   const { address } = useAuth();
   const { network } = useStacksNetwork();
-
+  console.log('network', network);
   let client: StackingClient | null = null;
 
   if (address !== null && isValidStacksAddress(address)) {
-    client = new StackingClient(address, network);
+    client = new StackingClient({ address, network });
   }
 
   return (
@@ -127,7 +127,7 @@ export function useGetAllowanceContractCallersQuery(callingContract: string) {
   return useQuery(['getAllowanceContractCallers', senderAddress, callingContract, network], () => {
     if (senderAddress) {
       const [contractAddress, contractName] = poxContractId.split('.');
-      return callReadOnlyFunction({
+      return fetchCallReadOnlyFunction({
         contractAddress,
         contractName,
         functionName: 'get-allowance-contract-callers',

src/constants/network.ts

@@ -1,15 +1,15 @@
 import { StacksNetworkName } from '@stacks/network';
-import { ChainID } from '@stacks/transactions';
+import { ChainId } from '@stacks/network';
 
 import {
   DEFAULT_DEVNET_SERVER,
   DEFAULT_MAINNET_SERVER,
   DEFAULT_TESTNET_SERVER,
 } from '../constants';
 
-export const NetworkIdModeMap: { [key in ChainID]: StacksNetworkName } = {
-  [ChainID.Mainnet]: 'mainnet',
-  [ChainID.Testnet]: 'testnet',
+export const NetworkIdModeMap: { [key in ChainId]: StacksNetworkName } = {
+  [ChainId.Mainnet]: 'mainnet',
+  [ChainId.Testnet]: 'testnet',
 };
 
 export const NetworkModeUrlMap: Record<StacksNetworkName, string> = {

src/context/global-context.tsx

@@ -2,7 +2,7 @@ import { ReactNode, createContext, useMemo, useState } from 'react';
 import { useCookies } from 'react-cookie';
 
 import { StacksNetworkName } from '@stacks/network';
-import { ChainID } from '@stacks/transactions';
+import { ChainId } from '@stacks/network';
 import cookie from 'cookie';
 
 import { Navigate } from '@components/navigate';
@@ -27,7 +27,7 @@ export const GlobalContext = createContext<GlobalContextProps>({
   activeNetwork: {
     label: 'stacks.co',
     url: NetworkModeUrlMap.mainnet,
-    networkId: ChainID.Mainnet,
+    networkId: ChainId.Mainnet,
     mode: 'mainnet',
   },
   activeNetworkKey: NetworkModeUrlMap.mainnet,
@@ -59,26 +59,26 @@ export const AppContextProvider = ({
       [apiUrls.mainnet]: {
         label: 'hiro.so',
         url: apiUrls.mainnet,
-        networkId: ChainID.Mainnet,
+        networkId: ChainId.Mainnet,
         mode: 'mainnet',
       },
       [apiUrls.testnet]: {
         label: 'hiro.so',
         url: apiUrls.testnet,
-        networkId: ChainID.Testnet,
+        networkId: ChainId.Testnet,
         mode: 'testnet',
       },
       [DEFAULT_DEVNET_SERVER]: {
         label: 'devnet',
         url: DEFAULT_DEVNET_SERVER,
-        networkId: ChainID.Testnet,
+        networkId: ChainId.Testnet,
         mode: 'testnet',
         isCustomNetwork: true,
       },
       [NAKA_TESTNET_SERVER]: {
         label: 'Nakamoto Testnet',
         url: NAKA_TESTNET_SERVER,
-        networkId: ChainID.Testnet,
+        networkId: ChainId.Testnet,
         mode: 'testnet',
         isCustomNetwork: true,
       },

src/hooks/use-stacks-network.ts

@@ -1,36 +1,43 @@
 import {
-  StacksDevnet,
-  StacksMainnet,
-  StacksMocknet,
+  STACKS_DEVNET,
+  STACKS_MAINNET,
+  STACKS_MOCKNET,
+  STACKS_TESTNET,
+  StacksNetwork,
   StacksNetworkName,
-  StacksTestnet,
+  networkFrom,
 } from '@stacks/network';
 import { NetworkInstance } from 'src/pages/stacking/start-pooled-stacking/types-preset-pools';
 import { getNetworkInstance } from 'src/pages/stacking/start-pooled-stacking/utils-preset-pools';
 import { whenStacksNetworkMode } from 'src/types/network';
 
-import { fetchWithApiKey } from '@utils/fetch-with-api-keys';
+import { fetchFn } from '@components/stacking-client-provider/fetch-fn';
 
 import { useGlobalContext } from '../context/use-app-context';
 
 export type StacksNetworkContext = ReturnType<typeof useStacksNetwork>;
 
+function setFetchFn(network: StacksNetwork) {
+  network.client.fetch = fetchFn;
+  return network;
+}
+
 export const useStacksNetwork = (): {
-  network: StacksTestnet | StacksMainnet;
+  network: StacksNetwork;
   networkName: StacksNetworkName;
   networkInstance: NetworkInstance;
   networkLabel: string;
 } => {
   const selectedNetwork = useGlobalContext().activeNetwork;
-  const apiServer = selectedNetwork.url;
+
   const networkMode = selectedNetwork.mode;
-  const Network = whenStacksNetworkMode(networkMode)({
-    mainnet: StacksMainnet,
-    testnet: StacksTestnet,
-    devnet: StacksDevnet,
-    mocknet: StacksMocknet,
+  const network = whenStacksNetworkMode(networkMode)({
+    mainnet: networkFrom(setFetchFn(STACKS_MAINNET)),
+    testnet: networkFrom(setFetchFn(STACKS_TESTNET)),
+    devnet: networkFrom(setFetchFn(STACKS_DEVNET)),
+    mocknet: networkFrom(setFetchFn(STACKS_MOCKNET)),
   });
-  const network = new Network({ url: apiServer, fetchFn: fetchWithApiKey });
+
   const networkInstance = getNetworkInstance(network);
   return {
     network,

src/pages/settings/network/network-items.tsx

@@ -7,7 +7,7 @@ import { useNavigate as useNavigateRouterDom } from 'react-router-dom';
 import { Configuration, InfoApi } from '@stacks/blockchain-api-client';
 import { CoreNodeInfoResponse } from '@stacks/blockchain-api-client/src/generated/models';
 import { StacksNetworkName } from '@stacks/network';
-import { ChainID } from '@stacks/transactions';
+import { ChainId } from '@stacks/network';
 import { Box, Flex, FlexProps, IconButton, Spinner, Stack, Tooltip, color } from '@stacks/ui';
 import { BoxProps } from '@stacks/ui-core';
 import { useQuery } from '@tanstack/react-query';
@@ -85,9 +85,9 @@ const Item = ({ item, isActive, isDisabled, onClick, isCustom, ...rest }: ItemPr
   const isTestnet = item.url === testnet;
   const isDefault = isMainnet || isTestnet;
 
-  let itemNetworkId: ChainID.Mainnet | ChainID.Testnet = isMainnet
-    ? ChainID.Mainnet
-    : ChainID.Testnet;
+  let itemNetworkId: ChainId.Mainnet | ChainId.Testnet = isMainnet
+    ? ChainId.Mainnet
+    : ChainId.Testnet;
 
   const doNotFetch = isDisabled || !item.url || isDefault;
 
@@ -107,8 +107,8 @@ const Item = ({ item, isActive, isDisabled, onClick, isCustom, ...rest }: ItemPr
   }
 
   const itemNetworkMode: StacksNetworkName = whenStacksChainId(itemNetworkId)({
-    [ChainID.Mainnet]: 'mainnet',
-    [ChainID.Testnet]: 'testnet',
+    [ChainId.Mainnet]: 'mainnet',
+    [ChainId.Testnet]: 'testnet',
   });
 
   return (

src/pages/stacking/components/stacking-for-user-form-container.tsx

@@ -19,7 +19,7 @@ export function StackingForUserFormContainer({
 }) {
   const { setFieldValue } = useFormikContext<PooledStackerFormValues>();
   const { network } = useStacksNetwork();
-  const client = new StackingClient(address, network);
+  const client = new StackingClient({ address, network });
   const getAccountExtendedBalancesQuery = useGetAccountExtendedBalancesWithClientQuery(client);
   const getDelegationStatusQuery = useDelegationStatusForUserQuery({
     client,

src/pages/stacking/direct-stacking-info/get-has-pending-direct-stacking.ts

@@ -46,13 +46,13 @@ function getDirectStackingStatusFromTransaction(network: StacksNetworkName) {
     if (!startBurnHeightCV || startBurnHeightCV.type !== ClarityType.UInt) {
       throw new Error('Expected `startBurnHeightCV` to be of type `UInt`.');
     }
-    const startBurnHeight: bigint = startBurnHeightCV.value;
+    const startBurnHeight = BigInt(startBurnHeightCV.value);
 
     // Amount
     if (!amountMicroStxCV || amountMicroStxCV.type !== ClarityType.UInt) {
       throw new Error('Expected `amountMicroStxCV` to be of type `UInt`.');
     }
-    const amountMicroStx: bigint = amountMicroStxCV.value;
+    const amountMicroStx = BigInt(amountMicroStxCV.value);
 
     // PoX address
     const poxAddress = poxAddressToBtcAddress(poxAddressCV, network);
@@ -61,7 +61,7 @@ function getDirectStackingStatusFromTransaction(network: StacksNetworkName) {
     if (!lockPeriodCV || lockPeriodCV.type !== ClarityType.UInt) {
       throw new Error('Expected `lockPeriodCV` to be of type `UInt`.');
     }
-    const lockPeriod = lockPeriodCV.value;
+    const lockPeriod = BigInt(lockPeriodCV.value);
 
     return {
       transactionId: transaction.tx_id,

src/pages/stacking/direct-stacking-info/utils-pending-txs.ts

@@ -132,5 +132,5 @@ export function expectUintCV(valueCV: ClarityValue, argName: string) {
   if (!valueCV || valueCV.type !== ClarityType.UInt) {
     throw new Error(`Expected '${argName}' to be of type 'UInt'.`);
   }
-  return valueCV.value;
+  return BigInt(valueCV.value);
 }

src/pages/stacking/pool-admin/delegate-stack-extend/components/delegate-stack-extend-info-card.tsx

@@ -26,12 +26,12 @@ import { DelegateStackExtendFormValues } from '../types';
 
 function StackerExtendInfo({ stacker }: { stacker: string }) {
   const { network } = useStacksNetwork();
-  const client = new StackingClient(stacker, network);
+  const client = new StackingClient({ address: stacker, network });
   const getAccountExtendedBalancesQuery = useGetAccountExtendedBalancesWithClientQuery(client);
 
   let amount: bigint | null = null;
   if (!getAccountExtendedBalancesQuery.isError && getAccountExtendedBalancesQuery.data?.stx) {
-    amount = intToBigInt(getAccountExtendedBalancesQuery.data.stx.locked, false);
+    amount = intToBigInt(getAccountExtendedBalancesQuery.data.stx.locked);
   }
   if (amount === null || amount === 0n) {
     return (

src/pages/stacking/pool-admin/delegate-stack-increase/components/delegate-stack-increase-info-card.tsx

@@ -42,12 +42,12 @@ function StackerIncreaseInfo({ stacker, amount }: { stacker: string; amount: str
 
 export function StackerDuration({ stacker }: { stacker: string }) {
   const { network } = useStacksNetwork();
-  const client = new StackingClient(stacker, network);
+  const client = new StackingClient({ address: stacker, network });
   const getAccountExtendedBalancesQuery = useGetAccountExtendedBalancesWithClientQuery(client);
 
   let lockedAmount: bigint | null = null;
   if (!getAccountExtendedBalancesQuery.isError && getAccountExtendedBalancesQuery.data?.stx) {
-    lockedAmount = intToBigInt(getAccountExtendedBalancesQuery.data.stx.locked, false);
+    lockedAmount = intToBigInt(getAccountExtendedBalancesQuery.data.stx.locked);
   }
   if (lockedAmount === null || lockedAmount === 0n) {
     return (
@@ -62,14 +62,13 @@ export function StackerDuration({ stacker }: { stacker: string }) {
 
 function IncreaseByValue({ stacker, amount }: { stacker: string; amount: IntegerType }) {
   const { network } = useStacksNetwork();
-  const client = new StackingClient(stacker, network);
+  const client = new StackingClient({ address: stacker, network });
   const getAccountExtendedBalancesQuery = useGetAccountExtendedBalancesWithClientQuery(client);
   if (getAccountExtendedBalancesQuery.isError || !getAccountExtendedBalancesQuery.data) {
     return <Value>0 STX</Value>;
   }
   const increaseBy =
-    intToBigInt(amount, false) * 1_000_000n -
-    intToBigInt(getAccountExtendedBalancesQuery.data.stx.locked, false);
+    intToBigInt(amount) * 1_000_000n - intToBigInt(getAccountExtendedBalancesQuery.data.stx.locked);
   return <Value>{toHumanReadableStx(increaseBy > 0n ? increaseBy : 0n)}</Value>;
 }
 

src/pages/stacking/pool-admin/delegate-stack-increase/utils.ts

@@ -64,11 +64,10 @@ export function createHandleSubmit({
 }: CreateHandleSubmitArgs) {
   return async function handleSubmit(values: DelegateStackIncreaseFormValues) {
     if (values.amount === null) throw new Error('Expected a non-null amount to be submitted.');
-    const stackerClient = new StackingClient(values.stacker, network);
+    const stackerClient = new StackingClient({ address: values.stacker, network });
     const balances = await stackerClient.getAccountExtendedBalances();
     const increaseBy =
-      intToBigInt(stxToMicroStx(values.amount).toString(), false) -
-      intToBigInt(balances.stx.locked, false);
+      intToBigInt(stxToMicroStx(values.amount).toString()) - intToBigInt(balances.stx.locked);
 
     // TODO: handle thrown errors
     const [stackingContract] = await Promise.all([client.getStackingContract()]);

src/pages/stacking/pool-admin/delegate-stack-stx/delegate-stack-stx.tsx

@@ -86,7 +86,7 @@ function DelegateStackStxLayout({ client }: DelegateStackStxLayoutProps) {
   }
 
   const validationSchema = createValidationSchema({
-    availableBalanceUStx: intToBigInt(UI_IMPOSED_MAX_STACKING_AMOUNT_USTX.toString(), false),
+    availableBalanceUStx: intToBigInt(UI_IMPOSED_MAX_STACKING_AMOUNT_USTX.toString()),
     // TODO why is current burnchain block height undefined?
     currentBurnHt: getPoxInfoQuery.data.current_burnchain_block_height || 0,
     network: networkName,

src/pages/stacking/pooled-stacking-info/components/content-active-pooling.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 
 import { intToBigInt } from '@stacks/common';
-import { AccountExtendedBalances, StackerInfo } from '@stacks/stacking';
+import { ExtendedAccountBalances, StackerInfo } from '@stacks/stacking';
 import { Box, Button, Text, color } from '@stacks/ui';
 import { DelegationInfoDetails } from 'src/types/stacking';
 
@@ -34,7 +34,7 @@ interface ActivePoolingContentProps {
   poolAddress: string;
   isContractCallExtensionPageOpen: boolean;
   stackerInfo: StackerInfo;
-  extendedStxBalance: AccountExtendedBalances['stx'];
+  extendedStxBalance: ExtendedAccountBalances['stx'];
   handleStopPoolingClick: () => void;
 }
 export function ActivePoolingContent({
@@ -86,7 +86,7 @@ export function ActivePoolingContent({
               />
               <Row>
                 <Label>Stacked amount</Label>
-                <Value>{toHumanReadableStx(intToBigInt(extendedStxBalance.locked, false))}</Value>
+                <Value>{toHumanReadableStx(intToBigInt(extendedStxBalance.locked))}</Value>
               </Row>
             </>
           )}