initial commit

Author: Abyl Ikhsanov

Diff for: package-lock.json

@@ -10,6 +10,7 @@
     "@types/node": "^16.18.46",
     "@types/react": "^18.2.21",
     "@types/react-dom": "^18.2.7",
+    "ethers": "5.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
@@ -39,5 +40,9 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "prettier": "^3.0.2",
+    "tailwindcss": "^3.3.3"
   }
 }

Diff for: package.json

@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 .App {
   text-align: center;
 }
@@ -36,3 +40,5 @@
     transform: rotate(360deg);
   }
 }
+
+

Diff for: src/App.css

@@ -1,24 +1,13 @@
 import React from 'react';
+import { Login } from './components/Login';
+
 import logo from './logo.svg';
 import './App.css';
 
 function App() {
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+      <Login />
     </div>
   );
 }

Diff for: src/App.tsx

@@ -0,0 +1,65 @@
+import React from "react";
+import { ethers } from "ethers";
+import "../interfaces/ether.d.ts";
+
+import "../App.css";
+
+export const Login = () => {
+  const [account, setAccount] = React.useState<string>("");
+  const [contractAddress, setContractAddress] = React.useState<string>("");
+  const [balance, setBalance] = React.useState<string>("");
+
+  const connectWallet = async () => {
+    const [address] = await window.ethereum.request({
+      method: "eth_requestAccounts",
+    });
+    const provider = new ethers.providers.Web3Provider(window.ethereum);
+    const balance = await provider.getBalance(address);
+    setBalance(ethers.utils.formatEther(balance));
+    setAccount(address);
+  };
+
+  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setContractAddress(event.target.value);
+  };
+
+  const callContractMethod = async () => {
+    const provider = new ethers.providers.Web3Provider(window.ethereum);
+    const contract = new ethers.Contract(
+      contractAddress,
+      ["function setToken()"],
+      provider.getSigner()
+    );
+    await contract.setToken();
+  };
+
+  return (
+    <div className="flex flex-col items-center">
+      <button
+        onClick={connectWallet}
+        className="bg-blue-600 text-white px-4 py-2 rounded"
+      >
+        Connect Wallet
+      </button>
+      {account && (
+        <div className="mt-4">
+          <p className="text-lg">Account: {account}</p>
+          <p className="text-lg">Balance: {balance}</p>
+          <input
+            type="text"
+            className="mt-4"
+            placeholder="Contract address"
+            value={contractAddress}
+            onChange={handleInputChange}
+          />
+          <button
+            onClick={callContractMethod}
+            className="bg-blue-600 text-white px-4 py-2 rounded mt-2"
+          >
+            Call Contract Method
+          </button>
+        </div>
+      )}
+    </div>
+  );
+};

Diff for: src/components/Login.tsx

@@ -0,0 +1,10 @@
+interface Ethereum {
+    enable(): Promise<string[]>;
+    selectedAddress: null | string;
+    request: any;
+  }
+  
+  interface Window {
+    ethereum: Ethereum;
+  }
+  

Diff for: src/interfaces/ether.d.ts

@@ -0,0 +1,9 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./src/**/*.{html,js,tsx}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+

Diff for: tailwind.config.js

@@ -21,6 +21,6 @@
     "jsx": "react-jsx"
   },
   "include": [
-    "src"
+    "src/**/*"
   ]
 }