Skip to content

Instantly share code, notes, and snippets.

@kshkong97

kshkong97/LoanRequest.html

Created August 10, 2020 19:29
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kshkong97/3bf0c9f0c59d74950b5fa740faedf3b2 to your computer and use it in GitHub Desktop.
Save kshkong97/3bf0c9f0c59d74950b5fa740faedf3b2 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
LoanRequest.html
@model WebApplication4.Newuser
<h2>Customer Registration Page</h2>
<html>
<style>
h2 {
font-family: Corbel;
}
table,
th,
td {
border: 1px solid black;
background-color: snow;
border-collapse: collapse;
}
body {
font-family: "Open Sans", sans-serif;
background-color: ghostwhite;
font-size: 15px;
}
input {
color: black;
background-color: ghostwhite;
margin: 15px;
}
div {
color: black;
}
#loanrequests {
background-color: #cae4f7;
color: black;
padding: 10px;
margin: 10px;
}
#CustomerDetails {
color: black;
background-color: #cae4f7;
padding: 10px;
margin: 10px;
}
#LoanForm {
color: white;
background-color: #2088ce;
width: 800;
padding: 10px;
margin: 20px;
}
.button {
background-color: #4caf50; /* Green */
border: none;
color: white;
padding: 10px 24px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
}
.button {
background-color: white;
color: black;
border: 2px solid #008cba;
}
.button:hover {
background-color: #008cba;
color: ghostwhite;
}
label {
width: 150px;
display: inline-block;
text-align: right;
}
</style>
<body>
<div>
<div>
<h3 id="LoanForm">
Customer Loan Request
</h3>
<br /><br />
<b>
<label for="address">
Customer Address:
</label>
<input type="text"
id="caddress"
name="caddress"
size="50" /><br /><br /><br />
<label for="name"> Loan Amount:</label>
<input type="text"
id="loanamount"
name="loanamount"
size="50" /><br /><br /><br />
<button class="button" id="LoanRequest">Submit</button>
<br /><br /><br />
</b>
<!-- Customer Details -->
<div id="CustomerDetails">
<h3 id="LoanForm">
Customer Details
</h3>
<br />
<label for="getAddress"> Customer address:</label>
<input type="text"
id="getAddress"
name="getAddress"
size="50" /><br /><br />
<button class="button" id="GetCustomer">Get Details</button>
<br /><br />
<h4 style="display: inline;">Name:</h4>
<h4 style="display: inline;" id="name"></h4>
<br /><br />
<br />
<h4 style="display: inline;">Date of Birth:</h4>
<h4 style="display: inline;" id="dob"></h4>
<br /><br />
<br />
<h4 style="display: inline;">Passport Number:</h4>
<h4 style="display: inline;" id="nric"></h4>
<br /><br />
<br />
<h4 style="display: inline;">Verified:</h4>
<h4 style="display: inline;" id="verified"></h4>
<br /><br />
<br />
</div>
</div>
<link rel="stylesheet" type="text/css" href="style18.css" />
<title>Front-End Blockchain</title>
<script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
<script>
let provider, Contract, address;
window.addEventListener("DOMContentLoaded", async () => {
try {
await ethereum.enable();
provider = new Web3(web3.currentProvider);
const abi = [
{
"inputs": [
{
"internalType": "address",
"name": "caddress",
"type": "address"
}
],
"name": "acceptLoan",
"outputs": [],
"stateMutability": "nonpayable",
"type": "function"
},
{
"inputs": [
{
"internalType": "uint256",
"name": "_loanamount",
"type": "uint256"
},
{
"internalType": "address",
"name": "caddress",
"type": "address"
}
],
"name": "LoanRequest",
"outputs": [],
"stateMutability": "nonpayable",
"type": "function"
},
{
"inputs": [
{
"internalType": "string",
"name": "_name",
"type": "string"
},
{
"internalType": "string",
"name": "_dob",
"type": "string"
},
{
"internalType": "string",
"name": "_nric",
"type": "string"
},
{
"internalType": "address",
"name": "_caddress",
"type": "address"
}
],
"name": "Registration",
"outputs": [],
"stateMutability": "nonpayable",
"type": "function"
},
{
"inputs": [],
"stateMutability": "nonpayable",
"type": "constructor"
},
{
"inputs": [
{
"internalType": "address",
"name": "caddress",
"type": "address"
}
],
"name": "VerifyCustomer",
"outputs": [],
"stateMutability": "nonpayable",
"type": "function"
},
{
"inputs": [
{
"internalType": "address",
"name": "",
"type": "address"
}
],
"name": "customers",
"outputs": [
{
"internalType": "string",
"name": "name",
"type": "string"
},
{
"internalType": "string",
"name": "dob",
"type": "string"
},
{
"internalType": "string",
"name": "nric",
"type": "string"
},
{
"internalType": "address",
"name": "caddress",
"type": "address"
},
{
"internalType": "bool",
"name": "verified",
"type": "bool"
},
{
"internalType": "uint256",
"name": "loanID",
"type": "uint256"
}
],
"stateMutability": "view",
"type": "function"
},
{
"inputs": [],
"name": "getAllLoans",
"outputs": [
{
"components": [
{
"internalType": "enum Project.LoanStatus",
"name": "loanStatus",
"type": "uint8"
},
{
"internalType": "address",
"name": "borrower",
"type": "address"
},
{
"internalType": "uint256",
"name": "loanamount",
"type": "uint256"
}
],
"internalType": "struct Project.Loan[]",
"name": "output",
"type": "tuple[]"
}
],
"stateMutability": "view",
"type": "function"
},
{
"inputs": [
{
"internalType": "address",
"name": "caddress",
"type": "address"
}
],
"name": "getCustomerDob",
"outputs": [
{
"internalType": "string",
"name": "",
"type": "string"
}
],
"stateMutability": "view",
"type": "function"
},
{
"inputs": [
{
"internalType": "address",
"name": "caddress",
"type": "address"
}
],
"name": "getCustomerName",
"outputs": [
{
"internalType": "string",
"name": "",
"type": "string"
}
],
"stateMutability": "view",
"type": "function"
},
{
"inputs": [
{
"internalType": "address",
"name": "caddress",
"type": "address"
}
],
"name": "getCustomerNric",
"outputs": [
{
"internalType": "string",
"name": "",
"type": "string"
}
],
"stateMutability": "view",
"type": "function"
},
{
"inputs": [
{
"internalType": "address",
"name": "caddress",
"type": "address"
}
],
"name": "getCustomerVerified",
"outputs": [
{
"internalType": "bool",
"name": "",
"type": "bool"
}
],
"stateMutability": "view",
"type": "function"
},
{
"inputs": [
{
"internalType": "enum Project.LoanStatus",
"name": "status",
"type": "uint8"
}
],
"name": "getLoansWithStatus",
"outputs": [
{
"components": [
{
"internalType": "enum Project.LoanStatus",
"name": "loanStatus",
"type": "uint8"
},
{
"internalType": "address",
"name": "borrower",
"type": "address"
},
{
"internalType": "uint256",
"name": "loanamount",
"type": "uint256"
}
],
"internalType": "struct Project.Loan[]",
"name": "outputs",
"type": "tuple[]"
}
],
"stateMutability": "view",
"type": "function"
},
{
"inputs": [
{
"internalType": "uint256",
"name": "",
"type": "uint256"
}
],
"name": "loans",
"outputs": [
{
"internalType": "enum Project.LoanStatus",
"name": "loanStatus",
"type": "uint8"
},
{
"internalType": "address",
"name": "borrower",
"type": "address"
},
{
"internalType": "uint256",
"name": "loanamount",
"type": "uint256"
}
],
"stateMutability": "view",
"type": "function"
}
]; // PUT ABI HERE0x247e0125472b6cd7ace3216ae9084323cc23320b
Contract = new provider.eth.Contract(
abi, "0xF8e0858b66700A3cbDd9D516cdDeedd1C7DC50fd"
);
document.querySelector("#caddress").value = ethereum.selectedAddress;
document.querySelector("#GetAddress").value =
ethereum.selectedAddress;
} catch (error) {
console.log({ error });
return alert("You need to enable Metamask to use this app.");
}
});
document.querySelector("#LoanRequest").addEventListener("click", () => {
const address = provider.utils.toChecksumAddress(
document.querySelector("#caddress").value
);
const loanamount = document.querySelector("#loanamount").value;
Contract.methods
.LoanRequest(loanamount, address)
.send({ from: ethereum.selectedAddress })
console.log({ loanamount });
});
document.querySelector("#GetCustomer").addEventListener("click", () => {
const address = document.querySelector("#getAddress").value;
Contract.methods
.getCustomerName(address)
.call()
.then((name) => {
document.querySelector("#name").innerText = name;
});
Contract.methods
.getCustomerNric(address)
.call()
.then((nric) => {
document.querySelector("#nric").innerText = nric;
});
Contract.methods
.getCustomerDob(address)
.call()
.then((dob) => {
document.querySelector("#dob").innerText = dob;
});
Contract.methods
.getCustomerVerified(address)
.call()
.then((verified) => {
console.log({ verified });
document.querySelector("#verified").innerText = verified;
});
});</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment