fix transport

Author: vraja-nayaka

digit-recognition/frontend/src/features/cat-identifier/api/readRpcState.ts

@@ -1,4 +1,5 @@
 import { TypeRegistry } from "@polkadot/types";
+import { RegistryTypes } from "@polkadot/types/types";
 import { useQuery } from "@tanstack/react-query";
 import { useReadContract, useWatchContractEvent } from "wagmi";
 
@@ -7,11 +8,12 @@ import { catDogIdentifierAbi } from "./catDogIdentifierAbi";
 import { CAT_IDENTIFIER_CONTRACT_ADDRESS, GEAR_API_NODE } from "@/consts";
 import { CalcResult } from "../types";
 import { mirrorAbi } from "./mirrorAbi";
+import { retryWhileDataChanged } from "@/lib/utils";
 
 export const readRpcState = async (mirrorId?: HexString) => {
   if (!mirrorId) return;
 
-  const types: Record<string, any> = {
+  const types: RegistryTypes = {
     FixedPoint: { num: "i128", scale: "u32" },
     CalcResult: {
       probability: "FixedPoint",
@@ -57,7 +59,7 @@ export const readRpcState = async (mirrorId?: HexString) => {
     json.result.payload
   );
 
-  let data = result[2].toJSON() as unknown as CalcResult;
+  const data = result[2].toJSON() as unknown as CalcResult;
 
   return data;
 };
@@ -85,13 +87,9 @@ export const useReadRpcState = ({ isSubmiting, onSuccess }: Params) => {
     eventName: "StateChanged",
     address: mirrorId as HexString,
     onLogs() {
-      if (isSubmiting) {
-        console.log("success reply");
-        onSuccess();
-        refetch();
-      }
+      retryWhileDataChanged({ data, refetch }).then(() => onSuccess());
     },
-    enabled: !!mirrorId,
+    enabled: !!mirrorId && isSubmiting,
   });
 
   return {

digit-recognition/frontend/src/features/digit-recognizer/api/readRpcState.ts

@@ -8,6 +8,7 @@ import { digitRecognitionAbi } from "./DigitRecognitionAbi";
 import { DIGIT_RECOGNITION_CONTRACT_ADDRESS, GEAR_API_NODE } from "@/consts";
 import { Result } from "../types";
 import { mirrorAbi } from "./mirrorAbi";
+import { retryWhileDataChanged } from "@/lib/utils";
 
 export const readRpcState = async (mirrorId?: HexString) => {
   if (!mirrorId) return;
@@ -77,38 +78,14 @@ export const useReadRpcState = ({ isSubmiting, onSuccess }: Params) => {
     enabled: !!mirrorId,
   });
 
-  const retryWhileDataChanged = () =>
-    new Promise<void>((resolve) => {
-      const prevData = JSON.stringify(data);
-
-      const retry = async (atempt = 0) => {
-        const response = await refetch();
-        const isSameData = JSON.stringify(response.data) === prevData;
-
-        if (isSameData) {
-          setTimeout(() => {
-            retry(atempt + 1);
-          }, 1000);
-        } else {
-          console.log("resolved on atempt", atempt);
-          resolve();
-        }
-      };
-
-      retry();
-    });
-
   useWatchContractEvent({
     abi: mirrorAbi,
     eventName: "StateChanged",
     address: mirrorId as HexString,
     onLogs() {
-      if (isSubmiting) {
-        console.log("success reply");
-        retryWhileDataChanged().then(() => onSuccess());
-      }
+      retryWhileDataChanged({ data, refetch }).then(() => onSuccess());
     },
-    enabled: !!mirrorId,
+    enabled: !!mirrorId && isSubmiting,
   });
 
   return {

digit-recognition/frontend/src/lib/utils/index.ts

@@ -1,5 +1,6 @@
 import { FixedPoint } from "../types";
 export { isMobileDevice, isMobile } from "./device-detection";
+export { retryWhileDataChanged } from "./retry-while-data-changed";
 
 export const copyToClipboard = async ({
   value,

digit-recognition/frontend/src/lib/utils/retry-while-data-changed.ts

@@ -0,0 +1,34 @@
+import { QueryObserverResult } from "@tanstack/react-query";
+
+type Params = {
+  data: unknown;
+  refetch: () => Promise<QueryObserverResult<unknown | undefined, Error>>;
+  maxRetries?: number;
+};
+
+const retryWhileDataChanged = ({ data, refetch, maxRetries = 15 }: Params) =>
+  new Promise<void>((resolve) => {
+    const prevData = JSON.stringify(data);
+
+    const retry = async (attempt = 0) => {
+      if (attempt >= maxRetries) {
+        console.log("maxRetries exceeded", maxRetries);
+        resolve();
+        return;
+      }
+
+      const response = await refetch();
+      const isSameData = JSON.stringify(response.data) === prevData;
+
+      if (isSameData) {
+        setTimeout(() => retry(attempt + 1), 1000);
+      } else {
+        console.log("resolved on attempt", attempt);
+        resolve();
+      }
+    };
+
+    retry();
+  });
+
+export { retryWhileDataChanged };

digit-recognition/frontend/src/providers.tsx

@@ -1,6 +1,6 @@
 import { WagmiAdapter } from "@reown/appkit-adapter-wagmi";
 import { PropsWithChildren } from "react";
-import { WagmiProvider, http } from "wagmi";
+import { WagmiProvider, webSocket } from "wagmi";
 import { createAppKit } from "@reown/appkit/react";
 import { AppKitNetwork } from "@reown/appkit/networks";
 import * as allNetworks from "@reown/appkit/networks";
@@ -32,7 +32,7 @@ const networks = [getNetwork(ETH_CHAIN_ID)] as [
 const wagmiAdapter = new WagmiAdapter({
   networks,
   projectId: PROJECT_ID,
-  transports: { [ETH_CHAIN_ID]: http(ETH_NODE_ADDRESS) },
+  transports: { [ETH_CHAIN_ID]: webSocket(ETH_NODE_ADDRESS) },
 });
 
 createAppKit({

mandelbrot-set/frontend/src/api/lib.ts

@@ -1,5 +1,6 @@
 import { GearApi, decodeAddress } from "@gear-js/api";
 import { TypeRegistry } from "@polkadot/types";
+import { RegistryTypes } from "@polkadot/types/types";
 import { TransactionBuilder, ActorId, ZERO_ADDRESS } from "sails-js";
 
 export interface FixedPoint {
@@ -18,8 +19,11 @@ export class Program {
   public readonly registry: TypeRegistry;
   public readonly manager: Manager;
 
-  constructor(public api: GearApi, public programId?: `0x${string}`) {
-    const types: Record<string, any> = {
+  constructor(
+    public api: GearApi,
+    public programId?: `0x${string}`
+  ) {
+    const types: RegistryTypes = {
       FixedPoint: { num: "i64", scale: "u32" },
       PointResult: { c_re: "i128", c_im: "i128", iter: "u32", checked: "bool" },
     };

mandelbrot-set/frontend/src/api/readRpcState.ts

@@ -1,5 +1,6 @@
 import { HexString } from "@gear-js/api";
 import { TypeRegistry } from "@polkadot/types";
+import { RegistryTypes } from "@polkadot/types/types";
 import { useQuery } from "@tanstack/react-query";
 import { useReadContract } from "wagmi";
 import { PointResult } from "./lib";
@@ -16,7 +17,7 @@ export const readRpcState = async (
   if (!mirrorId) return [];
   console.log("read state from startIndex:", startIndex);
 
-  const types: Record<string, any> = {
+  const types: RegistryTypes = {
     PointResult: {
       c_re: "i128",
       c_im: "i128",
@@ -71,7 +72,7 @@ export const readRpcState = async (
   let data = result[2].toJSON() as unknown as Array<PointResult>;
 
   if (data?.length === RESPONSE_SIZE) {
-    let newData = await readRpcState(
+    const newData = await readRpcState(
       mirrorId,
       startIndex + RESPONSE_SIZE,
       endIndex + RESPONSE_SIZE

mandelbrot-set/frontend/src/providers.tsx

@@ -1,6 +1,6 @@
 import { WagmiAdapter } from "@reown/appkit-adapter-wagmi";
 import { PropsWithChildren } from "react";
-import { WagmiProvider, http } from "wagmi";
+import { WagmiProvider, webSocket } from "wagmi";
 import { createAppKit } from "@reown/appkit/react";
 import { AppKitNetwork } from "@reown/appkit/networks";
 import * as allNetworks from "@reown/appkit/networks";
@@ -32,13 +32,13 @@ const getNetwork = (id: number) => {
 
 const networks = [getNetwork(ETH_CHAIN_ID)] as [
   AppKitNetwork,
-  ...AppKitNetwork[]
+  ...AppKitNetwork[],
 ];
 
 const wagmiAdapter = new WagmiAdapter({
   networks,
   projectId: PROJECT_ID,
-  transports: { [ETH_CHAIN_ID]: http(ETH_NODE_ADDRESS) },
+  transports: { [ETH_CHAIN_ID]: webSocket(ETH_NODE_ADDRESS) },
 });
 
 createAppKit({
@@ -57,15 +57,15 @@ createAppKit({
   },
   enableWalletConnect: false,
   enableWalletGuide: false,
-  
+
   allWallets: "HIDE",
   themeMode: "dark",
   themeVariables: {
     "--w3m-font-family": '"Roboto Mono", monospace',
     "--w3m-border-radius-master": "0px",
     "--w3m-font-size-master": "12px",
     "--w3m-accent": "#ffffff",
-    "--w3m-color-mix": '#a8f593'
+    "--w3m-color-mix": "#a8f593",
   },
 });