Add include virtual operations toggle to block details section

components/block/BlockDetails.tsx

@@ -13,6 +13,8 @@ interface BlockDetailsProps {
   virtualOperationLength: number;
   nonVirtualOperationLength: number;
   blockDetails?: Hive.BlockDetails;
+  enableRawVirtualOperations: boolean;
+  handleEnableVirtualOperations: () => void;
 }
 
 const BlockDetails: React.FC<BlockDetailsProps> = ({
@@ -21,6 +23,8 @@ const BlockDetails: React.FC<BlockDetailsProps> = ({
   blockDetails,
   virtualOperationLength,
   nonVirtualOperationLength,
+  enableRawVirtualOperations,
+  handleEnableVirtualOperations,
 }) => {
   return (
     <Card
@@ -85,6 +89,8 @@ const BlockDetails: React.FC<BlockDetailsProps> = ({
           nonVirtualOperationLength={nonVirtualOperationLength}
           virtualOperationsTypesCounters={virtualOperationsTypesCounters}
           nonVirtualOperationsTypesCounters={nonVirtualOperationsTypesCounters}
+          enableRawVirtualOperations={enableRawVirtualOperations}
+          handleEnableVirtualOperations={handleEnableVirtualOperations}
         />
       </CardContent>
     </Card>

components/block/BlockPageOperationCount.tsx

 import Explorer from "@/types/Explorer";
 import { getOperationTypeForDisplay } from "@/utils/UI";
 import { getOperationColor } from "../OperationsTable";
+import { Toggle } from "../ui/toggle";
+import { useUserSettingsContext } from "@/contexts/UserSettingsContext";
 
 interface BlockPageOperationCountProps {
   virtualOperationsTypesCounters?: Explorer.OperationCounter[];
   nonVirtualOperationsTypesCounters?: Explorer.OperationCounter[];
   virtualOperationLength: number;
   nonVirtualOperationLength: number;
+  enableRawVirtualOperations: boolean;
+  handleEnableVirtualOperations: () => void;
 }
 
 const BlockPageOperationCount: React.FC<BlockPageOperationCountProps> = ({
@@ -14,7 +18,12 @@ const BlockPageOperationCount: React.FC<BlockPageOperationCountProps> = ({
   nonVirtualOperationLength,
   virtualOperationsTypesCounters,
   nonVirtualOperationsTypesCounters,
+  enableRawVirtualOperations,
+  handleEnableVirtualOperations,
 }) => {
+  const { settings } = useUserSettingsContext();
+
+  const isRawView = settings.rawJsonView || settings.prettyJsonView;
   return (
     <section className="w-full flex flex-col items-center text-md px-4 mb-2 md:mb-4">
       <div className="w-full py-4">
@@ -44,6 +53,16 @@ const BlockPageOperationCount: React.FC<BlockPageOperationCountProps> = ({
         </div>
         <div className="my-5 flex justify-center">
           Virtual operations: {virtualOperationLength}
+          {isRawView && (
+            <div className="flex justify-center items-center">
+              <span className="ml-2">
+                <Toggle
+                  checked={enableRawVirtualOperations}
+                  onClick={handleEnableVirtualOperations}
+                />
+              </span>
+            </div>
+          )}
         </div>
         <div className="flex flex-wrap justify-center text-sm">
           {virtualOperationsTypesCounters &&