refactor: centralise error modal config

src/components/client/Instruction.tsx

@@ -39,6 +39,7 @@ import {
 import { mapIInstructionPreviewToIInstruction } from "mappers/preview-to-internal";
 import React, { useMemo } from "react";
 import { FaAnchor, FaEject, FaExchangeAlt, FaRocket } from "react-icons/fa";
+import { DEFAULT_ERROR_MODAL } from "utils/ui-constants";
 
 export const Instruction: React.FC<{ index: number }> = ({ index }) => {
   const rpcEndpoint = useSessionStoreWithUndo((state) => state.rpcEndpoint);
@@ -78,11 +79,9 @@ export const Instruction: React.FC<{ index: number }> = ({ index }) => {
       set(mapped);
     } catch (e: unknown) {
       toast({
+        ...DEFAULT_ERROR_MODAL,
         title: "Cannot map instruction to Anchor",
         description: (e as Error).message,
-        status: "error",
-        duration: 8000,
-        isClosable: true,
       });
     }
   };

src/components/client/accounts/AirdropButton.tsx

@@ -32,6 +32,7 @@ import { useWeb3Connection } from "hooks/useWeb3Connection";
 import React, { useRef, useState } from "react";
 import { FaParachuteBox } from "react-icons/fa";
 import { IPubKey } from "types/internal";
+import { DEFAULT_ERROR_MODAL } from "utils/ui-constants";
 import { toLamports } from "utils/web3js";
 
 export const AirdropButton: React.FC<{ accountPubkey: IPubKey }> = ({
@@ -57,12 +58,10 @@ export const AirdropButton: React.FC<{ accountPubkey: IPubKey }> = ({
       })
       .catch((e) => {
         toast({
+          ...DEFAULT_ERROR_MODAL,
           position: "top-right",
-          status: "error",
           title: `Air Drop has failed.`,
           description: `Error: ${e}`,
-          duration: 10_000,
-          isClosable: true,
         });
       });
   };

src/components/client/data/RawData.tsx

@@ -13,6 +13,7 @@ import { Description } from "components/common/Description";
 import { useInstruction } from "hooks/useInstruction";
 import React from "react";
 import { RawEncoding } from "types/internal";
+import { DEFAULT_ERROR_MODAL } from "utils/ui-constants";
 
 export const RawData: React.FC = () => {
   const { useShallowGet, update } = useInstruction();
@@ -55,10 +56,9 @@ export const RawData: React.FC = () => {
       });
     } catch (e) {
       toast({
+        ...DEFAULT_ERROR_MODAL,
         title: "Invalid raw data",
         description: `This is not a valid ${targetEncoding} string.`,
-        status: "error",
-        isClosable: true,
       });
       return;
     }

src/hooks/useAccountType.ts

@@ -6,6 +6,7 @@ import { useAccount } from "hooks/useAccount";
 import { useInstruction } from "hooks/useInstruction";
 import { useSessionStoreWithUndo } from "hooks/useSessionStore";
 import { AccountType, IAccountMetadata } from "types/internal";
+import { DEFAULT_ERROR_MODAL } from "utils/ui-constants";
 import { isValidPublicKey } from "utils/web3js";
 
 /**
@@ -35,11 +36,9 @@ export const useAccountType = (): {
   const wallet = () => {
     if (!walletPublicKey) {
       toast({
+        ...DEFAULT_ERROR_MODAL,
         title: "Wallet not connected!",
         description: "Please use the top-right button to connect one.",
-        status: "error",
-        duration: 8000,
-        isClosable: true,
       });
       return;
     }
@@ -80,11 +79,9 @@ export const useAccountType = (): {
 
     if (!isValidPublicKey(programId)) {
       toast({
+        ...DEFAULT_ERROR_MODAL,
         title: "Cannot create PDA",
         description: "The instruction needs a program ID",
-        status: "error",
-        duration: 8000,
-        isClosable: true,
       });
       return;
     }
@@ -109,11 +106,9 @@ export const useAccountType = (): {
 
     if (!walletPublicKey) {
       toast({
+        ...DEFAULT_ERROR_MODAL,
         title: "Wallet not connected!",
         description: "Please use the top-right button to connect one.",
-        status: "error",
-        duration: 8000,
-        isClosable: true,
       });
       return;
     }

src/hooks/useImportFromUrl.ts

@@ -15,6 +15,7 @@ import { mapProtobufToITransactionExt } from "mappers/protobuf-to-external";
 import { mapTransactionResponseToIPreview } from "mappers/web3js-to-preview";
 import { useEffect, useMemo, useState } from "react";
 import { useSearchParams } from "react-router-dom";
+import { DEFAULT_ERROR_MODAL } from "utils/ui-constants";
 import { short } from "utils/web3js";
 
 const DEFAULT_STATUS = { isLoading: false, status: "" };
@@ -67,11 +68,9 @@ export const useImportFromUrl = (): {
       setSearchParams({});
     } catch (e) {
       toast({
+        ...DEFAULT_ERROR_MODAL,
         title: "Transaction import failed",
         description: `Could not decode the provided transcation`,
-        status: "error",
-        duration: 10000,
-        isClosable: true,
       });
     }
   });
@@ -99,11 +98,9 @@ export const useImportFromUrl = (): {
       onError: (error) => {
         setStatus(DEFAULT_STATUS);
         toast({
+          ...DEFAULT_ERROR_MODAL,
           title: "Transaction import failed",
           description: `Failed to fetch the transcation: ${error.message}`,
-          status: "error",
-          duration: 15000,
-          isClosable: true,
         });
       },
     });
@@ -154,11 +151,9 @@ export const useImportFromUrl = (): {
       .catch((err) => {
         setStatus(DEFAULT_STATUS);
         toast({
+          ...DEFAULT_ERROR_MODAL,
           title: "Transaction import failed",
           description: `Cannot fetch transaction from the URL: ${err}`,
-          status: "error",
-          duration: 10000,
-          isClosable: true,
         });
       });
 

src/utils/ui-constants.ts

@@ -1,9 +1,16 @@
+import { UseToastOptions } from "@chakra-ui/react";
 import { Commitment, Finality, TransactionVersion } from "@solana/web3.js";
 import { DataFormat, InstructionDataFieldType } from "types/internal";
 import { Explorer, RunType } from "types/state";
 
 export const SIMULATED_SIGNATURE = "<simulated>";
 
+export const DEFAULT_ERROR_MODAL: UseToastOptions = {
+  status: "error",
+  duration: 8000,
+  isClosable: true,
+};
+
 export const RUN_TYPES: { id: RunType; name: string }[] = [
   { id: "send", name: "Send" },
   { id: "simulate", name: "Simulate" },