I made a login page with metamask for my Dapp, but now I need to link my login button to the profile page which will have student details like name, phonenumber, certificates (pdf) etc. where these data must be stored in a smart contract (solidity). I've also written the smart contract code. But the problem is I have no idea how to fetch the code in frontend written in typescript. Please give me a idea to code which does the job. I'll link my login.tsx file and solidity code.
Login.tsx:
import './Login.css';
import React, { useState } from 'react';
import Web3 from 'web3';
import { Auth } from '../types';
interface Props {
onLoggedIn: (auth: Auth) => void;
}
let web3: Web3 | undefined = undefined; // Will hold the web3 instance
export const Login = ({ onLoggedIn }: Props): JSX.Element => {
const [loading, setLoading] = useState(false); // Loading button state
const handleAuthenticate = ({
publicAddress,
signature,
}: {
publicAddress: string;
signature: string;
}) =>
fetch(`${process.env.REACT_APP_BACKEND_URL}/auth`, {
body: JSON.stringify({ publicAddress, signature }),
headers: {
'Content-Type': 'application/json',
},
method: 'POST',
}).then((response) => response.json());
const handleSignMessage = async ({
publicAddress,
nonce,
}: {
publicAddress: string;
nonce: string;
}) => {
try {
const signature = await web3!.eth.personal.sign(
`I am signing my one-time nonce: ${nonce}`,
publicAddress,
'' // MetaMask will ignore the password argument here
);
return { publicAddress, signature };
} catch (err) {
throw new Error(
'You need to sign the message to be able to log in.'
);
}
};
const handleSignup = (publicAddress: string) =>
fetch(`${process.env.REACT_APP_BACKEND_URL}/users`, {
body: JSON.stringify({ publicAddress }),
headers: {
'Content-Type': 'application/json',
},
method: 'POST',
}).then((response) => response.json());
const handleClick = async () => {
// Check if MetaMask is installed
if (!(window as any).ethereum) {
window.alert('Please install MetaMask first.');
return;
}
if (!web3) {
try {
// Request account access if needed
await (window as any).ethereum.enable();
// We don't know window.web3 version, so we use our own instance of Web3
// with the injected provider given by MetaMask
web3 = new Web3((window as any).ethereum);
} catch (error) {
window.alert('You need to allow MetaMask.');
return;
}
}
const coinbase = await web3.eth.getCoinbase();
if (!coinbase) {
window.alert('Please activate MetaMask first.');
return;
}
const publicAddress = coinbase.toLowerCase();
setLoading(true);
// Look if user with current publicAddress is already present on backend
fetch(
`${process.env.REACT_APP_BACKEND_URL}/users?publicAddress=${publicAddress}`
)
.then((response) => response.json())
// If yes, retrieve it. If no, create it.
.then((users) =>
users.length ? users[0] : handleSignup(publicAddress)
)
// Popup MetaMask confirmation modal to sign message
.then(handleSignMessage)
// Send signature to backend on the /auth route
.then(handleAuthenticate)
// Pass accessToken back to parent component (to save it in localStorage)
.then(onLoggedIn)
.catch((err) => {
window.alert(err);
setLoading(false);
});
};
return (
<div>
<p>Please Signup with MetaMask and Login</p>
<button className="Login-button Login-mm" onClick={handleClick}>
{loading ? 'Loading...' : 'Login with MetaMask'}
</button>
</div>
);
};
In the handleClick function I need to link my profile.tsx page,which is connected to solidity code.
Please someone help me to write the code for profile.tsx
Solidity code:
pragma solidity ^0.6.0;
contract register{
string name;
string dept;
uint phonenumber;
string addresshome;
string emailid;
uint aadhar;
string ipfshash1;
string ipfshash2;
string ipfshash3;
string ipfshash4;
constructor() public {
phonenumber=0;
aadhar=0;
}
function getname(string memory _name) public pure returns(string memory){
return _name;
}
function getdept(string memory _dept) public pure returns(string memory){
return _dept;
}
function getphonenumber(uint _phonenumber) public pure returns(uint){
return _phonenumber;
}
function getaddresshome(string memory _addresshome) public pure returns(string memory){
return _addresshome;
}
function getemailid(string memory _emailid) public pure returns(string memory){
return _emailid;
}
function getaadhar(uint _aadhar) public pure returns(uint){
return _aadhar;
}
function sendhash1(string memory x) public {
ipfshash1=x;
}
function gethash1() public view returns(string memory x) {
return ipfshash1;
}
function sendhash2(string memory x) public {
ipfshash2=x;
}
function gethash2() public view returns(string memory x) {
return ipfshash2;
}
function sendhash3(string memory x) public {
ipfshash3=x;
}
function gethash3() public view returns(string memory x) {
return ipfshash3;
}
function sendhash4(string memory x) public {
ipfshash4=x;
}
function gethash4() public view returns(string memory x) {
return ipfshash4;
}
}
