chore: gnoboard: Resolve ts:check errors, put in Makefile (#182)

Similar to dSocial PR gnoverse/dsocial#132, we
want to use `npm run ts:check` in the Makefile for gnoboard, but first
we must resolve the errors. This PR has five commits:

1. Add ts:check to package.json
2. A [previous
commit](b586114)
changes gnoboard to use `KeyInfo` instead of the alias `GnoAccount` . It
seems that this was missed in one file, so we make the same change.
3. In the catch clause, we call `GRPCError` which expects `ConnectError`
or null. But the error in the catch can be any type. So add an explicit
check for `instanceof ConnectError` .
4. The definition of `NetworkList` includes `onNetworkChange`, but
ChangeNetwork.stories doesn't have it. However, `onNetworkChange` isn't
used by the storybook, so we put a noop function.
5. Now that the errors are fixed, we can update the gnoboard Makefile.
Add a target ts_check to do `npm run ts:check`. Add this as a dependency
to the node_modules target, which is used by all the others.

---------

Signed-off-by: Jeff Thompson <[email protected]>

Author: jefft0

examples/js/expo/gnoboard/Makefile

@@ -24,9 +24,12 @@ go_service_files := $(shell find $(PROJECT_DIR)/service -iname '*.go')
 go_files := $(go_framework_files) $(go_service_files)
 go_deps := $(PROJECT_DIR)/go.mod $(PROJECT_DIR)/go.sum $(go_files)
 
+ts_check:
+	npm run ts:check
+
 # - Node: Handle node_modules
 
-node_modules: package.json package-lock.json
+node_modules: ts_check package.json package-lock.json
 	$(call check-program, npm)
 	(npm install && touch $@) || true
 .PHONY: node_modules

examples/js/expo/gnoboard/package.json

@@ -11,6 +11,7 @@
     "lint:fix": "eslint --fix 'src/**/*.{js,jsx,ts,tsx,json}'",
     "format": "prettier --write 'src/**/*.{js,jsx,ts,tsx,css,md,json}' --config ./.prettierrc",
     "storybook-generate": "sb-rn-get-stories",
+    "ts:check": "tsc",
     "storybook-watch": "sb-rn-watcher"
   },
   "dependencies": {

examples/js/expo/gnoboard/src/components/change-network/ChangeNetwork.stories.tsx

@@ -23,20 +23,24 @@ export default {
 };
 
 export const Basic = () => {
+  // This callback isn't used by the storybook
+  const onNetworkChange = async () => {}
   return (
     <>
-      <NetworkList networkMetainfos={chains} currentNetworkId='test3' />
+      <NetworkList networkMetainfos={chains} currentChainId='test3' onNetworkChange={onNetworkChange} />
     </>
   );
 };
 
 export const ListItem = ({ networkMetainfo }: Props) => {
+  // This callback isn't used by the storybook
+  const onPress = async () => {}
   return (
     <>
       <Spacer />
-      <NetworkListItem networkMetainfo={networkMetainfo} currentNetworkId={undefined} />
+      <NetworkListItem networkMetainfo={networkMetainfo} currentChainId={undefined} onPress={onPress} />
       <Spacer />
-      <NetworkListItem networkMetainfo={networkMetainfo} currentNetworkId={'test3'} />
+      <NetworkListItem networkMetainfo={networkMetainfo} currentChainId={'test3'} onPress={onPress} />
     </>
   );
 };

examples/js/expo/gnoboard/src/components/common/side-menu-account-item/side-menu-account-item.tsx

@@ -1,10 +1,10 @@
 import Button from '@gno/components/buttons';
 import { Spacer } from '@gno/components/row';
-import { GnoAccount } from '@gno/native_modules/types';
+import { KeyInfo } from '@gnolang/gnonative';
 
 interface SideMenuAccountItemProps {
-  account: GnoAccount;
-  changeAccount: (account: GnoAccount) => void;
+  account: KeyInfo;
+  changeAccount: (account: KeyInfo) => void;
 }
 
 const SideMenuAccountItem = (props: SideMenuAccountItemProps) => {

examples/js/expo/gnoboard/src/screens/devmode/index.tsx

@@ -35,12 +35,14 @@ function DevMode() {
         console.log('response: ', response);
         setAppConsole(Buffer.from(response.result).toString());
       }
-    } catch (error: ConnectError | unknown) {
-      const err = new GRPCError(error);
-      if (err.errCode() === ErrCode.ErrDecryptionFailed) {
-        const account = await gnonative.getActiveAccount();
-        setReenterPassword(account.key?.name);
-        return;
+    } catch (error) {
+      if (error instanceof ConnectError) {
+        const err = new GRPCError(error);
+        if (err.errCode() === ErrCode.ErrDecryptionFailed) {
+          const account = await gnonative.getActiveAccount();
+          setReenterPassword(account.key?.name);
+          return;
+        }
       }
       console.log(error);
       setAppConsole('error' + JSON.stringify(error));

examples/js/expo/gnoboard/src/screens/switch-accounts/ReenterPassword.tsx

@@ -7,6 +7,7 @@ import Text from '@gno/components/texts';
 import { ErrCode, GRPCError, useGnoNativeContext } from '@gnolang/gnonative';
 import { useState } from 'react';
 import { Modal as NativeModal } from 'react-native';
+import { ConnectError } from '@connectrpc/connect';
 
 export type Props = {
   visible: boolean;
@@ -27,12 +28,14 @@ const ReenterPassword = ({ visible, accountName, onClose }: Props) => {
       await gnonative.setPassword(password);
       onClose(true);
     } catch (error) {
-      const err = new GRPCError(error);
-      if (err.errCode() === ErrCode.ErrDecryptionFailed) {
-        setError('Wrong password, please try again.');
-      } else {
-        setError(JSON.stringify(error));
+      if (error instanceof ConnectError) {
+        const err = new GRPCError(error);
+        if (err.errCode() === ErrCode.ErrDecryptionFailed) {
+          setError('Wrong password, please try again.');
+          return;
+        }
       }
+      setError(JSON.stringify(error));
     }
   };
 

examples/js/expo/gnoboard/src/screens/wallet/home/index.tsx

@@ -35,10 +35,12 @@ export const Home: React.FC = () => {
           const balance = await gnonative.queryAccount(response.key.address);
           setBalance(balance);
         }
-      } catch (error: ConnectError | unknown) {
-        const err = new GRPCError(error);
-        if (err.errCode() === ErrCode.ErrNoActiveAccount) {
-          setUnknownAddress(true);
+      } catch (error) {
+        if (error instanceof ConnectError) {
+          const err = new GRPCError(error);
+          if (err.errCode() === ErrCode.ErrNoActiveAccount) {
+            setUnknownAddress(true);
+          }
         }
       } finally {
         setLoading(undefined);