WIP

package.json

@@ -8,18 +8,23 @@
     "@types/express": "^4.17.21",
     "@types/node": "^20.14.2",
     "@types/node-fetch": "^2.6.11",
+    "@types/react": "^19.0.8",
     "@types/sha256": "^0.2.2",
     "@types/sync-fetch": "^0.4.3",
     "cors": "^2.8.5",
     "delphinus-curves": "github:DelphinusLab/delphinus-curves#xgao",
     "dotenv": "^16.4.5",
     "ethers": "^6.13.1",
+    "react": "^18.3.1",
     "typescript": "^5.4.5",
     "zkwasm-minirollup-rpc": "github:DelphinusLab/zkWasm-minirollup-rpc"
   },
   "main": "src/index.js",
   "scripts": {
     "build": "npx tsc",
     "postinstall": "npm run build"
+  },
+  "devDependencies": {
+    "@types/react-redux": "^7.1.34"
   }
 }

src/reduxconnect.ts

@@ -1,8 +1,9 @@
-import { createSlice } from '@reduxjs/toolkit';
+import { createSlice, Draft } from '@reduxjs/toolkit';
 import { getConfig, sendTransaction, queryState, queryInitialState, sendExtrinsicTransaction } from "./connect.js";
 
 export enum ConnectState{
 	Init,
+	OnStart,
 	Preloading,
 	Idle,
 	InstallPlayer,
@@ -15,11 +16,10 @@ export enum ConnectState{
 
 export interface RequestError {
 	errorInfo: string,
-	payload: any,
 }
 
 interface UserState<PlayerInfo, GlobalState> {
-	player: PlayerInfo | null,
+	player: PlayerInfo,
 	state: GlobalState,
 }
 
@@ -39,6 +39,9 @@ export function createStateSlice<PlayerInfo, GlobalState, Config>(initialState:
 			setConnectState: (state, action) => {
 				state.connectState = action.payload;
 			},
+			setLastTransactionError: (state, action) => {
+				state.lastError = action.payload;
+			},
 		},
 
 		extraReducers: (builder) => {
@@ -53,20 +56,19 @@ export function createStateSlice<PlayerInfo, GlobalState, Config>(initialState:
 				.addCase(getConfig.rejected, (state, action) => {
 					state.lastError = {
 						errorInfo: `query config rejected: ${action.payload}`,
-						payload: action.payload,
 					}
 				})
 				.addCase(sendTransaction.pending, (state, action) => {
 					state.connectState = ConnectState.WaitingTxReply;
 				})
 				.addCase(sendTransaction.fulfilled, (state, action) => {
-					const loadedState = action.payload.state;
-					const loadedPlayer = action.payload.player;
+					const loadedState = action.payload.state ?? {} as Draft<GlobalState>;
+					const loadedPlayer = action.payload.player ?? {} as Draft<PlayerInfo>;
 					state.userState = {
 						player: loadedPlayer,
 						state: loadedState,
 					}
-					if(loadedPlayer != null) {
+					if(action.payload.player != null) {
 						state.connectState = ConnectState.Idle;
 					} else {
 						state.connectState = ConnectState.InstallPlayer;
@@ -75,7 +77,6 @@ export function createStateSlice<PlayerInfo, GlobalState, Config>(initialState:
 				.addCase(sendTransaction.rejected, (state, action) => {
 					state.lastError = {
 						errorInfo:`send transaction rejected: ${action.payload}`,
-						payload: action.payload,
 					}
 				})
 				.addCase(sendExtrinsicTransaction.pending, (state, action) => {
@@ -87,20 +88,19 @@ export function createStateSlice<PlayerInfo, GlobalState, Config>(initialState:
 				.addCase(sendExtrinsicTransaction.rejected, (state, action) => {
 					state.lastError = {
 						errorInfo:`send extrinsic transaction rejected: ${action.payload}`,
-						payload: action.payload,
 					}
 				})
 				.addCase(queryState.pending, (state, action) => {
 					state.connectState = ConnectState.QueryState;
 				})
 				.addCase(queryState.fulfilled, (state, action) => {
-					const loadedState = action.payload.state;
-					const loadedPlayer = action.payload.player;
+					const loadedState = action.payload.state ?? {} as Draft<GlobalState>;
+					const loadedPlayer = action.payload.player ?? {} as Draft<PlayerInfo>;
 					state.userState = {
 						player: loadedPlayer,
 						state: loadedState,
 					}
-					if(loadedPlayer != null) {
+					if(action.payload.player != null) {
 						state.connectState = ConnectState.Idle;
 					} else {
 						state.connectState = ConnectState.InstallPlayer;
@@ -109,17 +109,16 @@ export function createStateSlice<PlayerInfo, GlobalState, Config>(initialState:
 				.addCase(queryState.rejected, (state, action) => {
 					state.lastError = {
 						errorInfo: `query state rejected: ${action.payload}`,
-						payload: action.payload,
 					}
 					state.connectState = ConnectState.ConnectionError;
 				})
 				.addCase(queryInitialState.fulfilled, (state, action) => {
-					const loadedState = action.payload.state;
+					const loadedState = action.payload.state ?? {} as Draft<GlobalState>;
 					if(state.userState) {
 						state.userState.state = loadedState;
 					} else {
 						state.userState = {
-							player: null,
+							player: {} as Draft<PlayerInfo>,
 							state: loadedState
 						}
 					}
@@ -128,7 +127,6 @@ export function createStateSlice<PlayerInfo, GlobalState, Config>(initialState:
 					state.connectState = ConnectState.ConnectionError;
 					state.lastError = {
 						errorInfo: `query state rejected: ${action.payload}`,
-						payload: action.payload,
 					}
 				});