Improve user experience with send tx modal confirmation & fix issue #328 with add account modal

background/main.ts

@@ -139,6 +139,7 @@ import { getExtendedZoneForAddress } from "./services/chain/utils"
 import { NetworkInterface } from "./constants/networks/networkTypes"
 import { SignerImportMetadata } from "./services/keyring/types"
 import { NetworksArray } from "./constants/networks/networks"
+import { QuaiTransactionRequest } from "quais/lib/commonjs/providers"
 
 // This sanitizer runs on store and action data before serializing for remote
 // redux devtools. The goal is to end up with an object that is directly
@@ -774,6 +775,35 @@ export default class Main extends BaseService<never> {
       })
     )
   }
+  async signAndSendQuaiTransaction({
+    request,
+    accountSigner,
+  }: {
+    request: QuaiTransactionRequest
+    accountSigner: AccountSigner
+  }): Promise<boolean> {
+    try {
+      const transactionResponse =
+        await this.signingService.signAndSendQuaiTransaction(
+          request,
+          accountSigner
+        )
+
+      await this.analyticsService.sendAnalyticsEvent(
+        AnalyticsEvent.TRANSACTION_SIGNED,
+        {
+          chainId: transactionResponse.chainId,
+        }
+      )
+
+      return true
+    } catch (exception) {
+      this.store.dispatch(
+        clearTransactionState(TransactionConstructionStatus.Idle)
+      )
+      return false
+    }
+  }
 
   async connectChainService(): Promise<void> {
     // Initialize activities for all accounts once on and then
@@ -877,30 +907,6 @@ export default class Main extends BaseService<never> {
       }
     )
 
-    transactionConstructionSliceEmitter.on(
-      "signAndSendQuaiTransaction",
-      async ({ request, accountSigner }) => {
-        try {
-          const transactionResponse =
-            await this.signingService.signAndSendQuaiTransaction(
-              request,
-              accountSigner
-            )
-
-          await this.analyticsService.sendAnalyticsEvent(
-            AnalyticsEvent.TRANSACTION_SIGNED,
-            {
-              chainId: transactionResponse.chainId,
-            }
-          )
-        } catch (exception) {
-          this.store.dispatch(
-            clearTransactionState(TransactionConstructionStatus.Idle)
-          )
-        }
-      }
-    )
-
     signingSliceEmitter.on(
       "requestSignTypedData",
       async ({ typedData, account, accountSigner }) => {

background/redux-slices/assets.ts

@@ -219,15 +219,18 @@ export const getMaxFeeAndMaxPriorityFeePerGas = createBackgroundAsyncThunk(
  */
 export const sendAsset = createBackgroundAsyncThunk(
   "assets/sendAsset",
-  async (transferDetails: {
-    fromAddressNetwork: AddressOnNetwork
-    toAddressNetwork: AddressOnNetwork
-    assetAmount: AnyAssetAmount
-    gasLimit?: bigint
-    maxPriorityFeePerGas?: bigint & BigInt
-    maxFeePerGas?: bigint & BigInt
-    accountSigner: AccountSigner
-  }): Promise<{ success: boolean; errorMessage?: string }> => {
+  async (
+    transferDetails: {
+      fromAddressNetwork: AddressOnNetwork
+      toAddressNetwork: AddressOnNetwork
+      assetAmount: AnyAssetAmount
+      gasLimit?: bigint
+      maxPriorityFeePerGas?: bigint & BigInt
+      maxFeePerGas?: bigint & BigInt
+      accountSigner: AccountSigner
+    },
+    { extra: { main } }
+  ): Promise<{ success: boolean; errorMessage?: string }> => {
     const {
       fromAddressNetwork: { address: fromAddress, network: fromNetwork },
       toAddressNetwork: { address: toAddress, network: toNetwork },
@@ -281,15 +284,13 @@ export const sendAsset = createBackgroundAsyncThunk(
         data: transactionData,
         value: transactionValue,
       }
-      await transactionConstructionSliceEmitter.emit(
-        "signAndSendQuaiTransaction",
-        {
-          request,
-          accountSigner,
-        }
-      )
 
-      return { success: true }
+      const isSignedAndSent = await main.signAndSendQuaiTransaction({
+        request,
+        accountSigner,
+      })
+
+      return { success: isSignedAndSent }
     } catch (error) {
       return {
         success: false,

background/redux-slices/transaction-construction.ts

@@ -81,11 +81,6 @@ export const initialState: TransactionConstruction = {
 export type Events = {
   updateTransaction: QuaiTransactionRequestWithAnnotation
 
-  signAndSendQuaiTransaction: {
-    request: QuaiTransactionRequest
-    accountSigner: AccountSigner
-  }
-
   requestSignature: SignOperation<QuaiTransactionRequestWithAnnotation>
   signatureRejected: never
   broadcastSignedTransaction: QuaiTransaction

ui/components/AccountsNotificationPanel/AccountsNotificationPanelAccounts.tsx

@@ -353,7 +353,6 @@ export default function AccountsNotificationPanelAccounts({
                     <WalletTypeHeader
                       accountType={accountType}
                       walletNumber={idx + 1}
-                      path={accountTotalsBySignerId[0].path}
                       accountSigner={accountTotalsBySignerId[0].accountSigner}
                       signerId={accountTotalsBySignerId[0].signerId}
                       setZone={handleSetZone}

ui/components/AccountsNotificationPanel/WalletTypeHeader.tsx

@@ -63,14 +63,20 @@ export default function WalletTypeHeader({
   accountSigner: AccountSigner
   signerId?: string | null
   walletNumber?: number
-  path?: string | null
   setZone: (zone: Zone) => void
   addAddressSelected: boolean
   updateCustomOrder: (address: string[], signerId: string) => void
   updateUseCustomOrder: (useOrder: boolean, signerId: string) => void
   setSelectedAccountSigner: (signerId: string) => void
 }) {
   const { t } = useTranslation()
+
+  const areKeyringsUnlocked = useAreKeyringsUnlocked(false)
+  const history = useHistory()
+  const [showEditMenu, setShowEditMenu] = useState(false)
+  const [showZoneMenu, setShowZoneMenu] = useState(false)
+  const isWalletExists = useBackgroundSelector(selectIsWalletExists)
+
   const walletTypeDetails: { [key in AccountType]: WalletTypeInfo } = {
     [AccountType.ReadOnly]: {
       title: t("accounts.notificationPanel.readOnly"),
@@ -102,7 +108,6 @@ export default function WalletTypeHeader({
 
   const handleZoneSelection = (selectedZone: Zone) => {
     setZone(selectedZone as Zone)
-    dispatch(setShowingAddAccountModal(false))
   }
 
   useEffect(() => {
@@ -138,12 +143,6 @@ export default function WalletTypeHeader({
     return `${title} ${walletNumber}`
   }, [accountType, title, sectionCustomName, walletNumber])
 
-  const history = useHistory()
-  const areKeyringsUnlocked = useAreKeyringsUnlocked(false)
-  const [showEditMenu, setShowEditMenu] = useState(false)
-  const [showZoneMenu, setShowZoneMenu] = useState(false)
-  const isWalletExists = useBackgroundSelector(selectIsWalletExists)
-
   return (
     <>
       {accountSigner.type !== AccountType.ReadOnly && (

ui/components/Shared/SharedDrawer.tsx

@@ -57,7 +57,7 @@ export default function SharedDrawer({
         className={classNames("drawer-wrapper", {
           dark: isDark,
           closed: !isOpen,
-          fillAvailable: fillAvailable,
+          fillAvailable,
         })}
         style={
           {
@@ -87,7 +87,7 @@ export default function SharedDrawer({
         </div>
         <div
           className={classNames("drawer-body", {
-            fillAvailable: fillAvailable,
+            fillAvailable,
           })}
         >
           {displayChildren}