chore: temp commit

package.json

@@ -90,6 +90,7 @@
     "@reach/rect": "0.15.3",
     "@reach/utils": "0.15.3",
     "@reach/visually-hidden": "0.15.2",
+    "@redux-devtools/extension": "3.2.2",
     "@reduxjs/toolkit": "1.7.1",
     "@rehooks/document-title": "1.0.2",
     "@segment/analytics-next": "1.31.1",
@@ -167,6 +168,7 @@
     "@babel/runtime": "7.16.5",
     "@emotion/cache": "11.7.1",
     "@pmmmwh/react-refresh-webpack-plugin": "0.5.4",
+    "@redux-devtools/cli": "1.0.7",
     "@schemastore/web-manifest": "0.0.5",
     "@stacks/auth": "4.0.0",
     "@stacks/connect-react": "14.0.0",
@@ -270,8 +272,6 @@
     "**/**/prismjs": "1.27.0",
     "**/**/xmldom": "github:xmldom/xmldom#0.7.0",
     "**/**/@stacks/network": "4.0.0",
-    "@redux-devtools/cli/**/tar": "4.4.18",
-    "async": "2.6.4",
     "bn.js": "5.2.0",
     "buffer": "6.0.3",
     "css-what": "5.0.1",

src/app/pages/choose-account-request/account-request.tsx

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
-import { logger } from '@shared/logger';
 
+import { logger } from '@shared/logger';
 import { useRouteHeader } from '@app/common/hooks/use-route-header';
 import { useAppDetails } from '@app/common/hooks/auth/use-app-details';
 import { Header } from '@app/components/header';
@@ -14,6 +14,7 @@ import {
 import { useUserGrantsPermissionToAppDomain } from '@app/store/apps/apps.actions';
 
 import { useAccountRequestSearchParams } from './use-account-request-search-params';
+import { delay } from '@app/common/utils';
 
 export function AccountRequest() {
   const accounts = useAccounts();
@@ -24,7 +25,7 @@ export function AccountRequest() {
 
   useRouteHeader(<Header hideActions />);
 
-  const returnAccountDetailsToApp = (index: number) => {
+  const returnAccountDetailsToApp = async (index: number) => {
     if (!accounts) throw new Error('Cannot request account details with no account');
 
     if (!tabId || !id || !origin) {
@@ -36,6 +37,7 @@ export function AccountRequest() {
 
     grantDomainPermission(origin);
     sendRequestAccountResponseToTab({ tabId, id, account: accounts[index] });
+    await delay(1000);
     window.close();
   };
 
@@ -56,8 +58,8 @@ export function AccountRequest() {
   return (
     <AccountPickerLayout appName={appName}>
       <AccountPicker
-        onAccountSelected={index => returnAccountDetailsToApp(index)}
         selectedAccountIndex={null}
+        onAccountSelected={index => returnAccountDetailsToApp(index)}
       />
     </AccountPickerLayout>
   );

src/app/pages/home/home.tsx

@@ -14,18 +14,19 @@ import { HomeActions } from '@app/pages/home/components/home-actions';
 import { useCurrentAccount } from '@app/store/accounts/account.hooks';
 import { RouteUrls } from '@shared/route-urls';
 import { HomePageSelectors } from '@tests/page-objects/home-page.selectors';
+import { useTrackFirstDeposit } from '@app/common/hooks/analytics/transactions-analytics.hooks';
 
 import { AccountInfoFetcher, BalanceFetcher } from './components/fetchers';
 import { HomeTabs } from './components/home-tabs';
 import { OnboardingStepsList } from './components/onboarding-steps-list';
 import { useOnboardingSteps } from './hooks/use-onboarding-steps';
-import { useTrackFirstDeposit } from '@app/common/hooks/analytics/transactions-analytics.hooks';
 
 export function Home() {
   const { decodedAuthRequest } = useOnboardingState();
   const { showOnboardingSteps } = useOnboardingSteps();
   const navigate = useNavigate();
   const account = useCurrentAccount();
+
   useTrackFirstDeposit();
 
   useRouteHeader(

src/app/pages/transaction-request/components/page-top.tsx

@@ -6,7 +6,7 @@ import { getUrlHostname, getUrlPort } from '@app/common/utils';
 import { Caption, Title } from '@app/components/typography';
 import { usePageTitle } from '@app/pages/transaction-request/hooks/use-page-title';
 import { useTransactionRequestState } from '@app/store/transactions/requests.hooks';
-import { useOrigin } from '@app/store/transactions/requests.hooks';
+import { useTransactionRequestOrigin } from '@app/store/transactions/requests.hooks';
 import { TransactionSigningSelectors } from '@tests/page-objects/transaction-signing.selectors';
 
 function addPortSuffix(url: string) {
@@ -16,7 +16,7 @@ function addPortSuffix(url: string) {
 
 function PageTopBase(): JSX.Element | null {
   const transactionRequest = useTransactionRequestState();
-  const origin = useOrigin();
+  const origin = useTransactionRequestOrigin();
   const pageTitle = usePageTitle();
   const network = useCurrentNetwork();
   if (!transactionRequest) return null;

src/app/pages/transaction-request/components/submit-action.tsx

@@ -28,6 +28,7 @@ function SubmitActionSuspense(): JSX.Element {
   const error = useTransactionError();
   const [feeEstimations] = useFeeEstimationsState();
 
+  // console.log({ error, name: TransactionErrorReason[error] });
   const isDisabled = !!error || !feeEstimations.length;
 
   return (

src/app/pages/transaction-request/hooks/use-transaction-error.ts

@@ -7,29 +7,34 @@ import { TransactionErrorReason } from '@app/pages/transaction-request/component
 import { useContractInterface } from '@app/query/contract/contract.hooks';
 import { TransactionTypes } from '@stacks/connect';
 import { useCurrentAccountAvailableStxBalance } from '@app/store/accounts/account.hooks';
-import { useOrigin } from '@app/store/transactions/requests.hooks';
+import { useTransactionRequestOrigin } from '@app/store/transactions/requests.hooks';
 import {
   useTransactionBroadcastError,
   useTransactionRequestState,
-  useTransactionRequestValidation,
 } from '@app/store/transactions/requests.hooks';
 
 import { useUnsignedTransactionFee } from './use-signed-transaction-fee';
+import { useTransactionValidator } from './use-transaction-validator';
 
 export function useTransactionError() {
   const transactionRequest = useTransactionRequestState();
   const contractInterface = useContractInterface(transactionRequest);
   const fee = useUnsignedTransactionFee();
   const broadcastError = useTransactionBroadcastError();
-  const isValidTransaction = useTransactionRequestValidation();
-  const origin = useOrigin();
+
+  const txValidationResult = useTransactionValidator();
+
+  const origin = useTransactionRequestOrigin();
 
   const { currentAccount } = useWallet();
   const availableStxBalance = useCurrentAccountAvailableStxBalance();
 
   return useMemo<TransactionErrorReason | void>(() => {
+    // console.log({ transactionRequest, availableStxBalance, currentAccount });
+
     if (origin === false) return TransactionErrorReason.ExpiredRequest;
-    if (isValidTransaction === false) return TransactionErrorReason.Unauthorized;
+
+    if (!txValidationResult.isValid) return TransactionErrorReason.Unauthorized;
 
     if (!transactionRequest || !availableStxBalance || !currentAccount) {
       return TransactionErrorReason.Generic;
@@ -63,13 +68,13 @@ export function useTransactionError() {
     }
     return;
   }, [
-    fee,
-    broadcastError,
-    contractInterface,
+    origin,
+    txValidationResult.isValid,
+    transactionRequest,
     availableStxBalance,
     currentAccount,
-    transactionRequest,
-    isValidTransaction,
-    origin,
+    broadcastError,
+    contractInterface.isError,
+    fee,
   ]);
 }

src/app/pages/transaction-request/hooks/use-transaction-validator.ts

@@ -0,0 +1,44 @@
+import { useIsDomainPreApproved } from '@app/store/apps/apps.actions';
+import {
+  useTransactionRequestOrigin,
+  useTransactionRequestValidation,
+} from '@app/store/transactions/requests.hooks';
+
+interface SuccesfullTransactionValidationResult {
+  isValid: true;
+  validatedBy: 'jwt-payload' | 'preapproved-domain';
+}
+
+interface FailedTransactionValidationResult {
+  isValid: false;
+}
+
+type TransactionValidationResult =
+  | SuccesfullTransactionValidationResult
+  | FailedTransactionValidationResult;
+
+const invalidTxResult: FailedTransactionValidationResult = Object.seal({
+  isValid: false,
+});
+
+const validatedBySignedJwtPayload: SuccesfullTransactionValidationResult = Object.seal({
+  isValid: true,
+  validatedBy: 'jwt-payload',
+});
+
+const validatedByPreapprovedDomain: SuccesfullTransactionValidationResult = Object.seal({
+  isValid: true,
+  validatedBy: 'preapproved-domain',
+});
+
+export function useTransactionValidator(): TransactionValidationResult {
+  const isValidTransaction = useTransactionRequestValidation();
+  const origin = useTransactionRequestOrigin();
+  const isDomainApproved = useIsDomainPreApproved();
+
+  if (isValidTransaction) return validatedBySignedJwtPayload;
+
+  if (isDomainApproved(origin || '')) return validatedByPreapprovedDomain;
+
+  return invalidTxResult;
+}

src/app/pages/transaction-request/transaction-request.tsx

@@ -16,8 +16,10 @@ import { PostConditions } from '@app/pages/transaction-request/components/post-c
 import { StxTransferDetails } from '@app/pages/transaction-request/components/stx-transfer-details/stx-transfer-details';
 import { PostConditionModeWarning } from '@app/pages/transaction-request/components/post-condition-mode-warning';
 import { TransactionError } from '@app/pages/transaction-request/components/transaction-error/transaction-error';
+import { useIsDomainPreApproved } from '@app/store/apps/apps.actions';
 import {
   useTransactionRequestState,
+  useTransactionRequestValidation,
   useUpdateTransactionBroadcastError,
 } from '@app/store/transactions/requests.hooks';
 import {
@@ -31,6 +33,8 @@ import { SubmitAction } from './components/submit-action';
 import { useUnsignedTransactionFee } from './hooks/use-signed-transaction-fee';
 import { useAnalytics } from '@app/common/hooks/analytics/use-analytics';
 import { Estimations } from '@shared/models/fees-types';
+import { ErrorMessage } from './components/transaction-error/error-message';
+import { useTransactionValidator } from './hooks/use-transaction-validator';
 
 function TransactionRequestBase(): JSX.Element | null {
   useNextTxNonce();
@@ -43,6 +47,9 @@ function TransactionRequestBase(): JSX.Element | null {
   const { isSponsored } = useUnsignedTransactionFee();
   const feeSchema = useFeeSchema();
   const analytics = useAnalytics();
+  // const isValidTransaction = useTransactionRequestValidation();
+  // const isDomainApproved = useIsDomainPreApproved();
+  const txValidationResult = useTransactionValidator();
 
   const validationSchema = !isSponsored ? yup.object({ fee: feeSchema() }) : null;
 
@@ -93,6 +100,12 @@ function TransactionRequestBase(): JSX.Element | null {
         <PageTop />
         <PostConditionModeWarning />
         <TransactionError />
+        {/* {isValidTransaction ? null : (
+        <ErrorMessage
+          title="Unsigned transaction"
+          body="This transaction has been made from an unsigned source"
+        />
+      )} */}
         <PostConditions />
         {transactionRequest.txType === 'contract_call' && <ContractCallDetails />}
         {transactionRequest.txType === 'token_transfer' && <StxTransferDetails />}

src/app/pages/unauthorized-request/unauthorized-request.tsx

@@ -2,7 +2,7 @@ import { Box } from '@stacks/ui';
 
 import { GenericError } from '@app/components/generic-error/generic-error';
 
-const body = `The transaction request was not properly authorized by any of your Hiro Wallet accounts. This typically happens if you've logged into this app before using another account.`;
+const body = `The requesting origin has not been authorized. This may happen if you've sign in to this app before using another account.`;
 const helpTextList = [
   <Box as="li" mt="base">
     Please sign out of the app and sign back in to re-authenticate into the application. This should

src/app/routes/app-routes.tsx

@@ -25,11 +25,11 @@ import { WelcomePage } from '@app/pages/onboarding/welcome/welcome';
 import { useHasStateRehydrated } from '@app/store';
 import { UnauthorizedRequest } from '@app/pages/unauthorized-request/unauthorized-request';
 import { RouteUrls } from '@shared/route-urls';
+import { AccountRequest } from '@app/pages/choose-account-request/account-request';
 
 import { useOnWalletLock } from './hooks/use-on-wallet-lock';
 import { useOnSignOut } from './hooks/use-on-sign-out';
 import { OnboardingGate } from './onboarding-gate';
-import { AccountRequest } from '@app/pages/choose-account-request/account-request';
 
 export function AppRoutes(): JSX.Element | null {
   const { pathname } = useLocation();

src/app/store/apps/apps.actions.ts

@@ -1,9 +1,9 @@
 import { useCallback } from 'react';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 
-import { appsSlice } from './apps.slice';
+import { appsSlice, selectAllowedDomains } from './apps.slice';
 
-export const appActions = appsSlice.actions;
+const appActions = appsSlice.actions;
 
 export function useUserGrantsPermissionToAppDomain() {
   const dispatch = useDispatch();
@@ -15,3 +15,14 @@ export function useUserGrantsPermissionToAppDomain() {
     [dispatch]
   );
 }
+
+export function useIsDomainPreApproved() {
+  const domains = useSelector(selectAllowedDomains);
+  return useCallback(
+    (domain: string) => {
+      const url = new URL(domain);
+      return domains.flatMap(Object.values).includes(url.host);
+    },
+    [domains]
+  );
+}

src/app/store/apps/apps.slice.ts

@@ -1,4 +1,5 @@
 import { createEntityAdapter, createSlice } from '@reduxjs/toolkit';
+import { RootState } from '..';
 
 interface AppDetails {
   domain: string;
@@ -15,3 +16,9 @@ export const appsSlice = createSlice({
     appConnected: appsAdapter.addOne,
   },
 });
+
+const selectApps = (state: RootState) => state.apps;
+
+const appsSelectors = appsAdapter.getSelectors(selectApps);
+
+export const selectAllowedDomains = appsSelectors.selectAll;