Merge pull request #42 from Amira1502/convert-js-to-ts

gagdiez · web-flow · commit 9d4ac4bdd0dc · 2025-10-01T12:51:25.000+02:00
chore: convert hello-near-examples frontend to ts
diff --git a/frontend/.eslintrc.json b/frontend/.eslintrc.json
@@ -1,6 +1,33 @@
 {
+  "root": true,
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "project": "./tsconfig.json",
+    "tsconfigRootDir": ".",
+    "ecmaVersion": 2022,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
+  "plugins": ["@typescript-eslint"],
   "extends": [
-    "next/babel",
-    "next/core-web-vitals"
-  ]
-}
+    "next/core-web-vitals",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:@typescript-eslint/recommended-requiring-type-checking"
+  ],
+  "rules": {
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/explicit-function-return-type": "off",
+    "@typescript-eslint/no-unused-vars": ["warn", { "argsIgnorePattern": "^_" }],
+    "@typescript-eslint/no-unsafe-assignment": "warn",
+    "@typescript-eslint/no-unsafe-call": "warn",
+    "@typescript-eslint/no-unsafe-member-access": "warn"
+  },
+  "ignorePatterns": ["node_modules/", ".next/", "out/"],
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  }
+}
diff --git a/frontend/jsconfig.json b/frontend/jsconfig.json
diff --git a/frontend/next-env.d.ts b/frontend/next-env.d.ts
@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+/// <reference path="./build/types/routes.d.ts" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.
diff --git a/frontend/src/components/cards.tsx b/frontend/src/components/cards.tsx
@@ -1,6 +1,5 @@
-import Link from 'next/link';
-
-import styles from '@/styles/app.module.css';
+import Link from "next/link";
+import styles from "@/styles/app.module.css";
 
 export const Cards = () => {
   return (
diff --git a/frontend/src/components/navigation.tsx b/frontend/src/components/navigation.tsx
@@ -1,14 +1,14 @@
 import Image from 'next/image';
 import Link from 'next/link';
-
 import { useEffect, useState } from 'react';
 import { useWalletSelector } from '@near-wallet-selector/react-hook';
 
-import NearLogo from '/public/near-logo.svg';
+import NearLogo from '../../public/near-logo.svg';
 
 export const Navigation = () => {
-  const [action, setAction] = useState(() => { });
-  const [label, setLabel] = useState('Loading...');
+  // Type the action as a function that returns void
+  const [action, setAction] = useState<() => void>(() => () => {});
+  const [label, setLabel] = useState<string>('Loading...');
   const { signedAccountId, signIn, signOut } = useWalletSelector();
 
   useEffect(() => {
@@ -19,13 +19,20 @@ export const Navigation = () => {
       setAction(() => signIn);
       setLabel('Login');
     }
-  }, [signedAccountId]);
+  }, [signedAccountId, signIn, signOut]);
 
   return (
     <nav className="navbar navbar-expand-lg">
       <div className="container-fluid">
         <Link href="/" passHref legacyBehavior>
-          <Image priority src={NearLogo} alt="NEAR" width="30" height="24" className="d-inline-block align-text-top" />
+          <Image
+            priority
+            src={NearLogo}
+            alt="NEAR"
+            width={30}
+            height={24}
+            className="d-inline-block align-text-top"
+          />
         </Link>
         <div className="navbar-nav pt-1">
           <button className="btn btn-secondary" onClick={action}>
diff --git a/frontend/src/config.js b/frontend/src/config.js
diff --git a/frontend/src/config.ts b/frontend/src/config.ts
@@ -0,0 +1,41 @@
+// Type definitions
+interface ContractPerNetwork {
+  mainnet: string;
+  testnet: string;
+}
+
+interface EVMWalletChain {
+  chainId: number;
+  name: string;
+  explorer: string;
+  rpc: string;
+}
+
+// Contract addresses per network
+const contractPerNetwork: ContractPerNetwork = {
+  mainnet: 'hello.near-examples.near',
+  testnet: 'hello.near-examples.testnet',
+};
+
+// Chains for EVM Wallets
+const evmWalletChains: Record<'mainnet' | 'testnet', EVMWalletChain> = {
+  mainnet: {
+    chainId: 397,
+    name: 'Near Mainnet',
+    explorer: 'https://eth-explorer.near.org',
+    rpc: 'https://eth-rpc.mainnet.near.org',
+  },
+  testnet: {
+    chainId: 398,
+    name: 'Near Testnet',
+    explorer: 'https://eth-explorer-testnet.near.org',
+    rpc: 'https://eth-rpc.testnet.near.org',
+  },
+};
+
+// Selected network
+export const NetworkId: 'mainnet' | 'testnet' = 'testnet';
+
+// Contract & EVM chain for the selected network
+export const HelloNearContract: string = contractPerNetwork[NetworkId];
+export const EVMWalletChain: EVMWalletChain = evmWalletChains[NetworkId];
diff --git a/frontend/src/global.d.ts b/frontend/src/global.d.ts
@@ -0,0 +1,22 @@
+// SVG modules
+declare module '*.svg' {
+  import * as React from 'react';
+  const ReactComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
+  const src: string;
+  export default src;
+  export { ReactComponent };
+}
+
+// CSS modules
+declare module "*.module.css" {
+  const classes: { [key: string]: string };
+  export default classes;
+}
+
+// Regular CSS
+declare module "*.css";
+
+// Untyped local modules (if needed)
+declare module "@/config";
+declare module "@/wallets/web3modal";
+declare module "@/components/navigation";
diff --git a/frontend/src/pages/_app.js b/frontend/src/pages/_app.js
diff --git a/frontend/src/pages/_app.tsx b/frontend/src/pages/_app.tsx
@@ -0,0 +1,52 @@
+import "@/styles/globals.css";
+import "@near-wallet-selector/modal-ui/styles.css";
+
+import type { AppProps } from "next/app";
+import { WalletSelectorProvider } from "@near-wallet-selector/react-hook";
+import { Navigation } from "@/components/navigation";
+import { HelloNearContract, NetworkId } from "@/config";
+
+// Wallet setups
+import { setupMyNearWallet } from "@near-wallet-selector/my-near-wallet";
+import { setupMeteorWallet } from "@near-wallet-selector/meteor-wallet";
+import { setupMeteorWalletApp } from "@near-wallet-selector/meteor-wallet-app";
+import { setupBitteWallet } from "@near-wallet-selector/bitte-wallet";
+import { setupEthereumWallets } from "@near-wallet-selector/ethereum-wallets";
+import { setupHotWallet } from "@near-wallet-selector/hot-wallet";
+import { setupLedger } from "@near-wallet-selector/ledger";
+import { setupSender } from "@near-wallet-selector/sender";
+import { setupHereWallet } from "@near-wallet-selector/here-wallet";
+import { setupNearMobileWallet } from "@near-wallet-selector/near-mobile-wallet";
+import { setupWelldoneWallet } from "@near-wallet-selector/welldone-wallet";
+
+// Ethereum adapters
+import { wagmiAdapter, web3Modal } from "@/wallets/web3modal";
+
+// Types
+import type { WalletModuleFactory } from "@near-wallet-selector/core";
+
+const walletSelectorConfig = {
+  network: NetworkId,
+  modules: [
+    setupEthereumWallets({ wagmiConfig: wagmiAdapter.wagmiConfig, web3Modal }),
+    setupBitteWallet(),
+    setupMeteorWallet(),
+    setupMeteorWalletApp({ contractId: HelloNearContract }),
+    setupHotWallet(),
+    setupLedger(),
+    setupSender(),
+    setupHereWallet(),
+    setupNearMobileWallet(),
+    setupWelldoneWallet(),
+    setupMyNearWallet(),
+  ] as WalletModuleFactory[], // ✅ force correct typing
+};
+
+export default function App({ Component, pageProps }: AppProps) {
+  return (
+    <WalletSelectorProvider config={walletSelectorConfig}>
+      <Navigation />
+      <Component {...pageProps} />
+    </WalletSelectorProvider>
+  );
+}
diff --git a/frontend/src/pages/hello-near/index.tsx b/frontend/src/pages/hello-near/index.tsx
@@ -10,13 +10,13 @@ import { useWalletSelector } from '@near-wallet-selector/react-hook';
 export default function HelloNear() {
   const { signedAccountId, viewFunction, callFunction } = useWalletSelector();
 
-  const [greeting, setGreeting] = useState('loading...');
+  const [greeting, setGreeting] = useState<string>('loading...');
   const [newGreeting, setNewGreeting] = useState('');
   const [loggedIn, setLoggedIn] = useState(false);
   const [showSpinner, setShowSpinner] = useState(false);
 
   useEffect(() => {
-    viewFunction({ contractId: HelloNearContract, method: 'get_greeting' }).then((greeting) => setGreeting(greeting));
+    viewFunction({ contractId: HelloNearContract, method: 'get_greeting' }).then((greeting) => setGreeting(greeting as string));
   }, []);
 
   useEffect(() => {
@@ -27,7 +27,7 @@ export default function HelloNear() {
     // Try to store greeting, revert if it fails
     callFunction({ contractId: HelloNearContract, method: 'set_greeting', args: { greeting: newGreeting } })
       .then(async () => {
-        const greeting = await viewFunction({ contractId: HelloNearContract, method: 'get_greeting' });
+        const greeting = (await viewFunction({ contractId: HelloNearContract, method: 'get_greeting' })) as string;
         setGreeting(greeting);
         setShowSpinner(false);
       });
diff --git a/frontend/src/pages/index.tsx b/frontend/src/pages/index.tsx
@@ -1,17 +1,24 @@
-import Image from 'next/image';
+import Image from "next/image";
 
-import NearLogo from '/public/near.svg';
-import NextLogo from '/public/next.svg';
-import { Cards } from '@/components/cards';
-import styles from '@/styles/app.module.css';
+import NearLogo from "/public/near.svg";
+import NextLogo from "/public/next.svg";
+import { Cards } from "@/components/cards";
+import styles from "@/styles/app.module.css";
 
 export default function Home() {
   return (
     <main className={styles.main}>
-      <div className={styles.description}> </div>
+      <div className={styles.description}></div>
 
       <div className={styles.center}>
-        <Image className={styles.logo} src={NearLogo} alt="NEAR Logo" width={110 * 1.5} height={28 * 1.5} priority />
+        <Image
+          className={styles.logo}
+          src={NearLogo}
+          alt="NEAR Logo"
+          width={110 * 1.5}
+          height={28 * 1.5}
+          priority
+        />
         <h3 className="ms-2 me-3 text-dark"> + </h3>
         <Image
           className={styles.logo}
diff --git a/frontend/src/wallets/web3modal.ts b/frontend/src/wallets/web3modal.ts
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
@@ -0,0 +1,35 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ]
+    },
+    "jsx": "preserve",
+    "strict": true,
+    "moduleResolution": "node",
+    "skipLibCheck": true,
+    "target": "ES2017",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "noEmit": true,
+    "incremental": true,
+    "module": "esnext",
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.tsx",
+    "global.d.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}
