fix: clean up, restructure, dead code

package.json

@@ -44,14 +44,14 @@
     "@reach/utils": "0.15.0",
     "@reach/visually-hidden": "0.15.0",
     "@rehooks/document-title": "1.0.2",
-    "@stacks/auth": "1.5.0-alpha.0",
-    "@stacks/blockchain-api-client": "0.59.0",
+    "@stacks/auth": "2.0.0-beta.1",
+    "@stacks/blockchain-api-client": "0.61.0",
     "@stacks/connect": "5.5.0",
     "@stacks/connect-react": "10.0.0",
     "@stacks/connect-ui": "5.1.2",
-    "@stacks/network": "1.5.0-alpha.0",
+    "@stacks/network": "2.0.0-beta.0",
     "@stacks/rpc-client": "1.0.3",
-    "@stacks/transactions": "1.4.1",
+    "@stacks/transactions": "2.0.0-beta.1",
     "@stacks/ui": "7.8.0",
     "@stacks/ui-core": "7.3.0",
     "@stacks/ui-theme": "7.5.0",
@@ -61,21 +61,21 @@
     "@tippyjs/react": "4.2.5",
     "@vkontakte/vk-qr": "2.0.10",
     "are-passive-events-supported": "1.1.1",
-    "argon2-browser": "1.15.4",
+    "argon2-browser": "1.18.0",
     "assert": "2.0.0",
     "bignumber.js": "9.0.1",
     "bn.js": "5.2.0",
     "body-parser": "1.19.0",
     "buffer": "6.0.3",
     "capsize": "2.0.0",
-    "chroma-js": "2.1.1",
-    "concurrently": "6.1.0",
+    "chroma-js": "2.1.2",
+    "concurrently": "6.2.0",
     "csstype": "3.0.8",
-    "dayjs": "1.10.4",
-    "dompurify": "2.2.8",
+    "dayjs": "1.10.5",
+    "dompurify": "2.2.9",
     "download": "8.0.0",
     "downshift": "6.1.3",
-    "formik": "2.2.6",
+    "formik": "2.2.9",
     "history": "5.0.0",
     "http-server": "0.12.3",
     "jsontokens": "3.0.0",
@@ -84,11 +84,11 @@
     "prismjs": "1.23.0",
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "react-hot-toast": "1.0.2",
+    "react-hot-toast": "2.0.0",
     "react-icons": "4.2.0",
     "react-router": "6.0.0-beta.0",
     "react-router-dom": "6.0.0-beta.0",
-    "recoil": "0.3.0",
+    "recoil": "0.3.1",
     "safe-compare": "1.1.4",
     "schema-inspector": "2.0.1",
     "swr": "0.5.6",
@@ -101,35 +101,35 @@
     "zxcvbn": "4.4.2"
   },
   "devDependencies": {
-    "@actions/core": "1.2.7",
-    "@babel/core": "7.14.2",
+    "@actions/core": "1.3.0",
+    "@babel/core": "7.14.3",
     "@babel/plugin-proposal-class-properties": "7.13.0",
     "@babel/plugin-transform-regenerator": "7.13.15",
-    "@babel/plugin-transform-runtime": "7.14.2",
-    "@babel/preset-env": "7.14.2",
+    "@babel/plugin-transform-runtime": "7.14.3",
+    "@babel/preset-env": "7.14.4",
     "@babel/preset-react": "7.13.13",
     "@babel/preset-typescript": "7.13.0",
     "@babel/runtime": "7.14.0",
     "@blockstack/stacks-blockchain-api-types": "0.55.3",
     "@blockstack/stacks-blockchain-sidecar-types": "0.0.22",
-    "@pmmmwh/react-refresh-webpack-plugin": "0.5.0-beta.7",
+    "@pmmmwh/react-refresh-webpack-plugin": "0.5.0-beta.8",
     "@schemastore/web-manifest": "0.0.5",
-    "@stacks/prettier-config": "0.0.7",
+    "@stacks/prettier-config": "0.0.8",
     "@types/argon2-browser": "1.12.0",
     "@types/chroma-js": "2.1.3",
-    "@types/chrome": "0.0.139",
+    "@types/chrome": "0.0.144",
     "@types/copy-webpack-plugin": "8.0.0",
     "@types/dompurify": "2.2.2",
-    "@types/download": "6.2.4",
+    "@types/download": "8.0.0",
     "@types/expect-puppeteer": "4.4.5",
     "@types/html-webpack-plugin": "3.2.5",
     "@types/jest": "26.0.23",
     "@types/just-debounce-it": "1.5.0",
-    "@types/node": "15.0.3",
+    "@types/node": "15.12.1",
     "@types/prismjs": "1.16.5",
     "@types/qrcode.react": "1.0.1",
-    "@types/react": "17.0.5",
-    "@types/react-dom": "17.0.5",
+    "@types/react": "17.0.9",
+    "@types/react-dom": "17.0.6",
     "@types/react-router-dom": "5.1.7",
     "@types/react-test-renderer": "17.0.1",
     "@types/segment-analytics": "0.0.33",
@@ -138,8 +138,8 @@
     "@types/webpack": "5.28.0",
     "@types/webpack-dev-server": "3.11.4",
     "@types/zxcvbn": "4.4.1",
-    "@typescript-eslint/eslint-plugin": "4.23.0",
-    "@typescript-eslint/parser": "4.23.0",
+    "@typescript-eslint/eslint-plugin": "4.26.0",
+    "@typescript-eslint/parser": "4.26.0",
     "babel-loader": "8.2.2",
     "base64-loader": "1.0.0",
     "bip39": "3.0.4",
@@ -150,8 +150,8 @@
     "cross-env": "7.0.3",
     "crypto-browserify": "3.12.0",
     "deepmerge": "4.2.2",
-    "esbuild-loader": "2.13.0",
-    "eslint": "7.26.0",
+    "esbuild-loader": "2.13.1",
+    "eslint": "7.28.0",
     "eslint-plugin-jest": "24.3.6",
     "eslint-plugin-react-hooks": "4.2.0",
     "generate-json-webpack-plugin": "2.0.0",
@@ -194,9 +194,6 @@
     "@stacks/ui-core": "7.3.0",
     "@stacks/ui-theme": "7.5.0",
     "@stacks/ui-utils": "7.5.0",
-    "@stacks/connect": "5.5.0",
-    "@stacks/connect-react": "10.0.0",
-    "@stacks/connect-ui": "5.1.1",
     "@tabler/icons": "1.41.2",
     "bn.js": "5.2.0",
     "buffer": "6.0.3",

src/common/api/fetch.ts

@@ -1,4 +1,4 @@
-import { fetcher } from '@common/wrapped-fetch';
+import { fetcher } from '@common/api/wrapped-fetch';
 
 export const withApiServer = (apiServer: string) => (path?: string) =>
   path ? apiServer + path : apiServer;

src/common/api/names.ts

@@ -0,0 +1,7 @@
+import { fetcher } from '@common/api/wrapped-fetch';
+
+export async function fetchNamesByAddress(networkUrl: string, address: string): Promise<string[]> {
+  const res = await fetcher(networkUrl + `/v1/addresses/stacks/${address}`);
+  const data = await res.json();
+  return data?.names || [];
+}

src/common/api/transactions.ts

@@ -2,7 +2,7 @@ import {
   MempoolTransaction,
   MempoolTransactionListResponse,
 } from '@blockstack/stacks-blockchain-api-types';
-import { fetcher } from '@common/wrapped-fetch';
+import { fetcher } from '@common/api/wrapped-fetch';
 
 interface GetKeyOptions {
   index: number;

src/common/hooks/use-account-balances.ts → src/common/hooks/account/use-account-balances.ts

@@ -1,4 +1,4 @@
-import { useFetchAccountData } from '@common/hooks/use-account-info';
+import { useFetchAccountData } from '@common/hooks/account/use-account-info';
 
 export function useAccountBalances() {
   const accountData = useFetchAccountData();

src/common/hooks/use-account-info.ts → src/common/hooks/account/use-account-info.ts

@@ -1,5 +1,5 @@
 import { accountBalancesState, accountDataState } from '@store/accounts';
-import { useLoadable } from './use-loadable';
+import { useLoadable } from '../use-loadable';
 
 export const useFetchAccountData = () => {
   return useLoadable(accountDataState);

src/common/hooks/use-account-names.ts → src/common/hooks/account/use-account-names.ts

@@ -1,7 +1,7 @@
 import { accountNameState } from '@store/accounts/names';
 import { useLoadable } from '@common/hooks/use-loadable';
-import { useCurrentAccount } from '@common/hooks/use-current-account';
 import { Account } from '@stacks/wallet-sdk';
+import { useCurrentAccount } from '@common/hooks/account/use-current-account';
 
 export function useAccountNames() {
   return useLoadable(accountNameState);

src/common/hooks/use-switch-account.ts → src/common/hooks/account/use-switch-account.ts

@@ -1,15 +1,15 @@
 import { useWallet } from '@common/hooks/use-wallet';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import { hasSwitchedAccountsState, transactionAccountIndexState } from '@store/accounts';
-import { networkTransactionVersionState } from '@store/networks';
 import { useCallback } from 'react';
+import { transactionNetworkVersionState } from '@store/transactions';
 
 const TIMEOUT = 350;
 
 export const useSwitchAccount = (callback?: () => void) => {
   const { wallet, currentAccountIndex, doSwitchAccount } = useWallet();
   const txIndex = useRecoilValue(transactionAccountIndexState);
-  const transactionVersion = useRecoilValue(networkTransactionVersionState);
+  const transactionVersion = useRecoilValue(transactionNetworkVersionState);
   const [hasSwitched, setHasSwitched] = useRecoilState(hasSwitchedAccountsState);
 
   const handleSwitchAccount = useCallback(

src/common/hooks/auth/use-app-details.tsx

@@ -0,0 +1,6 @@
+import { useAuthRequest } from '@common/hooks/auth/use-auth-request';
+
+export const useAppDetails = () => {
+  const { appName: name, appIcon: icon, appURL: url } = useAuthRequest();
+  return { name, icon, url };
+};

src/common/hooks/auth/use-auth-request.ts

@@ -0,0 +1,6 @@
+import { useRecoilValue } from 'recoil';
+import { authRequestState } from '@store/onboarding';
+
+export function useAuthRequest() {
+  return useRecoilValue(authRequestState);
+}

src/common/hooks/use-magic-recovery-code.ts → src/common/hooks/auth/use-magic-recovery-code.ts

@@ -3,7 +3,7 @@ import { magicRecoveryCodePasswordState, magicRecoveryCodeState } from '@store/o
 import { useLoading } from '@common/hooks/use-loading';
 import { useWallet } from '@common/hooks/use-wallet';
 import React, { useCallback, useEffect, useState } from 'react';
-import { useOnboardingState } from '@common/hooks/use-onboarding-state';
+import { useOnboardingState } from '@common/hooks/auth/use-onboarding-state';
 import { useDoChangeScreen } from '@common/hooks/use-do-change-screen';
 import { USERNAMES_ENABLED } from '@common/constants';
 import { ScreenPaths } from '@store/common/types';

src/common/hooks/use-asset-transfer.ts → src/common/hooks/transaction/use-asset-transfer.ts

@@ -1,4 +1,5 @@
 import {
+  AnchorMode,
   bufferCVFromString,
   ClarityValue,
   createAddress,
@@ -96,6 +97,7 @@ export function useMakeAssetTransfer() {
       contractName,
       postConditions,
       nonce: new BN(nonce, 10),
+      anchorMode: AnchorMode.Any,
     };
 
     return makeContractCall(txOptions);

src/common/hooks/use-edit-postconditions.ts → src/common/hooks/transaction/use-edit-postconditions.ts

@@ -2,7 +2,7 @@
 import { useSetRecoilState } from 'recoil';
 import { currentPostConditionIndexStore, postConditionsStore } from '@store/transaction';
 import { selectedAssetIdState } from '@store/assets/asset-search';
-import { useFetchBalances } from '@common/hooks/use-account-info';
+import { useFetchBalances } from '@common/hooks/account/use-account-info';
 import { useDoChangeScreen } from '@common/hooks/use-do-change-screen';
 import { useCallback } from 'react';
 import { addressToString, PostCondition, PostConditionType } from '@stacks/transactions';

src/common/hooks/use-make-stx-transfer.ts → src/common/hooks/transaction/use-make-stx-transfer.ts

@@ -1,13 +1,14 @@
 import { useRecoilCallback, waitForAll } from 'recoil';
-import { stacksNetworkStore } from '@store/networks';
+
+import { currentStacksNetworkState } from '@store/networks';
 import { currentAccountState } from '@store/accounts';
 import { correctNonceState } from '@store/accounts/nonce';
-import { makeSTXTokenTransfer, StacksTransaction } from '@stacks/transactions';
+import { AnchorMode, makeSTXTokenTransfer, StacksTransaction } from '@stacks/transactions';
 import BN from 'bn.js';
 import { stxToMicroStx } from '@stacks/ui-utils';
 import { useLoading } from '@common/hooks/use-loading';
 import { useEffect } from 'react';
-import { useMakeAssetTransfer } from '@common/hooks/use-asset-transfer';
+import { useMakeAssetTransfer } from '@common/hooks/transaction/use-asset-transfer';
 import { useSelectedAsset } from '@common/hooks/use-selected-asset';
 
 interface TokenTransferParams {
@@ -21,7 +22,7 @@ export function useMakeStxTransfer() {
     const { amount, recipient, memo } = params;
     const { network, account, nonce } = await snapshot.getPromise(
       waitForAll({
-        network: stacksNetworkStore,
+        network: currentStacksNetworkState,
         account: currentAccountState,
         nonce: correctNonceState,
       })
@@ -36,6 +37,7 @@ export function useMakeStxTransfer() {
       senderKey: account.stxPrivateKey,
       network,
       nonce: new BN(nonce.toString(), 10),
+      anchorMode: AnchorMode.Any,
     });
   });
 }

src/common/hooks/use-submit-stx-transaction.ts → src/common/hooks/transaction/use-submit-stx-transaction.ts

@@ -7,7 +7,7 @@ import { useDoChangeScreen } from '@common/hooks/use-do-change-screen';
 import { useWallet } from '@common/hooks/use-wallet';
 import { useLoading } from '@common/hooks/use-loading';
 import { useRecoilValue } from 'recoil';
-import { stacksNetworkStore } from '@store/networks';
+import { currentStacksNetworkState } from '@store/networks';
 import { useCallback } from 'react';
 import { ScreenPaths } from '@store/common/types';
 import { useRevalidateApi } from '@common/hooks/use-revalidate-api';
@@ -43,7 +43,7 @@ export function useHandleSubmitTransaction({
   const doChangeScreen = useDoChangeScreen();
   const { doSetLatestNonce } = useWallet();
   const { setIsLoading, setIsIdle } = useLoading(loadingKey);
-  const stacksNetwork = useRecoilValue(stacksNetworkStore);
+  const stacksNetwork = useRecoilValue(currentStacksNetworkState);
   const revalidate = useRevalidateApi();
   const { setActiveTabActivity } = useHomeTabs();
 

src/common/hooks/transaction/use-transaction-broadcast.ts

@@ -0,0 +1,49 @@
+import { useWallet } from '@common/hooks/use-wallet';
+import { useRecoilCallback, waitForAll } from 'recoil';
+import { currentAccountState } from '@store/accounts';
+import {
+  pendingTransactionState,
+  signedTransactionState,
+  transactionBroadcastErrorState,
+} from '@store/transactions';
+import { requestTokenState } from '@store/transactions/requests';
+import { currentNetworkState } from '@store/networks';
+import { finalizeTxSignature } from '@common/utils';
+import { handleBroadcastTransaction } from '@common/transactions/transactions';
+
+export function useTransactionBroadcast() {
+  const { doSetLatestNonce } = useWallet();
+  return useRecoilCallback(
+    ({ snapshot, set }) =>
+      async () => {
+        const { account, signedTransaction, pendingTransaction, requestToken, network } =
+          await snapshot.getPromise(
+            waitForAll({
+              signedTransaction: signedTransactionState,
+              account: currentAccountState,
+              pendingTransaction: pendingTransactionState,
+              requestToken: requestTokenState,
+              network: currentNetworkState,
+            })
+          );
+
+        if (!pendingTransaction || !account || !requestToken || !signedTransaction) {
+          set(transactionBroadcastErrorState, 'No pending transaction found.');
+          return;
+        }
+
+        try {
+          const result = await handleBroadcastTransaction(
+            signedTransaction,
+            pendingTransaction,
+            network.url
+          );
+          await doSetLatestNonce(signedTransaction);
+          finalizeTxSignature(requestToken, result);
+        } catch (error) {
+          set(transactionBroadcastErrorState, error.message);
+        }
+      },
+    [doSetLatestNonce]
+  );
+}

src/common/hooks/use-transaction-error.ts → src/common/hooks/transaction/use-transaction-error.ts

@@ -1,16 +1,19 @@
 import {
   useTransactionContractInterface,
   useTransactionRequest,
-} from '@common/hooks/use-transaction';
+} from '@common/hooks/transaction/use-transaction';
 import { useRecoilValue } from 'recoil';
-import { isUnauthorizedTransactionState, transactionBroadcastErrorState } from '@store/transaction';
 import { useWallet } from '@common/hooks/use-wallet';
-import { useFetchBalances } from '@common/hooks/use-account-info';
+import { useFetchBalances } from '@common/hooks/account/use-account-info';
 import { useMemo } from 'react';
 import { TransactionErrorReason } from '@pages/transaction/transaction-error';
 import BigNumber from 'bignumber.js';
 import { TransactionTypes } from '@stacks/connect';
-import { useTransactionFee } from '@common/hooks/use-transaction-fee';
+import { useTransactionFee } from '@common/hooks/transaction/use-transaction-fee';
+import {
+  isUnauthorizedTransactionState,
+  transactionBroadcastErrorState,
+} from '@store/transactions';
 
 export function useTransactionError() {
   const transactionRequest = useTransactionRequest();

src/common/hooks/use-transaction-fee.ts → src/common/hooks/transaction/use-transaction-fee.ts

@@ -1,4 +1,4 @@
-import { useSignedTransaction } from '@common/hooks/use-transaction';
+import { useSignedTransaction } from '@common/hooks/transaction/use-transaction';
 import { AuthType } from '@stacks/transactions';
 
 export function useTransactionFee() {

src/common/hooks/use-transaction-page-title.ts → src/common/hooks/transaction/use-transaction-page-title.ts

@@ -1,4 +1,4 @@
-import { useTransactionRequest } from '@common/hooks/use-transaction';
+import { useTransactionRequest } from '@common/hooks/transaction/use-transaction';
 import { useMemo } from 'react';
 import { TransactionTypes } from '@stacks/connect';