ChoiceCoin · BisiShitta · Jun 12, 2022 · Jun 12, 2022 · Jun 12, 2022 · Jun 12, 2022
diff --git a/HeadlineHackathon/BisiShitta_Bash/README.md b/HeadlineHackathon/BisiShitta_Bash/README.md
@@ -0,0 +1,7 @@
+Headline Hackathon.
+
+A simple web application that allows users to send funds using the algorand wallet connect feature. Users are able to send Algo, choice or headline.
+
+Live link: http://algo-transfers.herokuapp.com/
+
+Note: Wallet connected to the site should have choice and headline asset. Add assets on https://wallet.myalgo.com/access and https://app.tinyman.org/ to swap
diff --git a/HeadlineHackathon/BisiShitta_Bash/algo.js b/HeadlineHackathon/BisiShitta_Bash/algo.js
diff --git a/HeadlineHackathon/BisiShitta_Bash/app.js b/HeadlineHackathon/BisiShitta_Bash/app.js
@@ -0,0 +1,24 @@
+const express = require('express');
+const path = require('path');
+const app = express();
+
+app.use(express.static(__dirname + "/"));
+
+app.get('/', (req, res) =>{
+  res.sendFile(path.join(__dirname + "/index.html"))
+})
+
+app.get('/index', (req, res) =>{
+  res.sendFile(path.join(__dirname + "/index.html"))
+})
+
+app.get('/modal', (req, res) =>{
+  res.sendFile(path.join(__dirname + "/modal.html"))
+})
+
+
+var port = process.env.PORT || 3000;
+app.listen(port, function(err){
+  if(err) console.log(err);
+  console.log(`Server listening on port ${port}`);
+})
diff --git a/HeadlineHackathon/BisiShitta_Bash/index.html b/HeadlineHackathon/BisiShitta_Bash/index.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
+	<title>Payment</title>
+	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+	<link rel="stylesheet" type="text/css" href="/style.css">
+</head>
+<body>
+
+	<div class="container">
+
+		<h3>
+			<span id="connection"></span>
+		</h3>
+		<h2>Transfer Form</h2>
+		<div class="input_g">
+					<div class="input_b" id ="connectWallet">
+                      <button type="submit" onclick="connectWallet()">Connect Wallet </button>
+					</div>		
+				</div>
+
+				<h5>To transfer, send amount to the address.</h5>
+				<div class="input_group">
+					<div class="input_box">
+						<label  for="pay_with"><h6>Pay With</h6>
+							<select name="pay_with" id="pay_with">
+							<option value="Algo">Algo</option>	
+							<option value="Choice">Choice coin</option>
+							<option value="Headline">Headline</option>		
+							</select>
+						</label>
+					</div>		
+				</div>
+				<div class="input_group">
+					<div class="input_box">
+						<h6>Amount</h6>
+						<input id="amount" type="text" name="amount">
+					</div>		
+				</div>
+				<div class="input_group">
+					<div class="input_box">
+						<h6>Enter Recepient Wallet Address</h6>
+						<input id="recieverwallet" type="text" name="recieverwallet" >
+					</div>		
+				</div>
+				<div class="input_group">
+					<div class="input_box">
+						<h6>Transaction Remarks</h6>
+						<input id="note" type="text" name="note" >
+					</div>		
+				</div>
+
+					<div class="input_group">
+					<div class="input_box">
+                        <button id="button" onclick="newPayment()">Proceed to Payment</button>
+					</div>		
+				</div>
+			</div>
+
+	</div>
+    <script
+        src="https://cdn.jsdelivr.net/npm/algosdk@1.13.0-beta.1/dist/browser/algosdk.min.js"
+        integrity="sha384-w9fodN00YjvWxdNoiyT+W6CqaATkXlfid9tnzBlToDqZWepVWLjI5wO7jNL4+aNs"
+        crossorigin="anonymous"
+    ></script>
+	<script type="text/javascript" src="/algo.js"></script>
+    <script type="text/javascript" src="/index.js"></script>
+	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
+	<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
+	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
+</body>
+</html>
diff --git a/HeadlineHackathon/BisiShitta_Bash/index.js b/HeadlineHackathon/BisiShitta_Bash/index.js
@@ -0,0 +1,139 @@
+const Host = "https://testnet-algorand.api.purestake.io/ps2";
+const Puretoken = {
+    "X-API-Key": "z6H94GE3sI8w100S7MyY92YMK5WIPAmD6YksRDsC"
+}
+const Port = "";
+const algodClient = new algosdk.Algodv2(Puretoken, Host, Port);
+
+const amountId = document.getElementById("amount"); 
+const walletId = document.getElementById("recieverwallet"); 
+const remarksId = document.getElementById("note");
+const connectWalletDiv = document.getElementById("connectWallet");
+
+const connected = document.getElementById("connection")
+
+const myAlgoConnect = new MyAlgoConnect();
+let response;
+let finalResponse;
+let assetValue;
+
+//connect to AlgoWallet
+const connectWallet = async() => {
+    try{
+        response = await myAlgoConnect.connect();
+        if(response){
+            connectWalletDiv.hidden = true;
+            let str = response[0].address;
+            connected.textContent= `${str.slice(0,7)}...Connected`
+        }
+    }
+    catch(err){
+        console.log(err);
+    }
+}
+
+//Collect transaction details
+const newPayment = async() => {
+    if(!response){
+        connectWallet();
+    }
+    else{
+        let amount = Number(amountId.value);
+        let reciever = walletId.value;
+        let remarks = remarksId.value;
+        let transactionId = await processPayment(reciever,amount,remarks);
+        if(transactionId) {
+            console.log(transactionId.txId);
+            finalResponse = {
+                reciever : reciever,
+                transId : transactionId.txId,
+                amt :amount,
+                asset : assetValue,
+                remark: remarks
+            }
+            window.localStorage.setItem('Modal', JSON.stringify(finalResponse));
+            window.location.assign("/modal");
+        }
+        else{
+            connected.textContent = `Transaction failed`
+        }
+    }
+}
+
+//Send transaction to algo
+const processPayment = async (reciever,amount,remarks) => {
+        let params = await algodClient.getTransactionParams().do(); //get params
+        let sender = response[0].address;
+        let encoder = new TextEncoder();  //encode
+        try {
+            const assetId = document.getElementById("pay_with");
+            const asset = assetId.value;
+            assetValue = asset;
+            if(asset == "Algo"){
+                let txn = algosdk.makePaymentTxnWithSuggestedParamsFromObject({
+                    from: sender, 
+                    to: reciever, 
+                    amount: amount, 
+                    note: encoder.encode(remarks), 
+                    suggestedParams: params
+                });
+                return signTransfer(txn);
+            }
+            else {
+                if (asset == "Choice"){
+                    ASSET_ID = 21364625;
+                }
+                else {
+                    ASSET_ID = 62482362;
+                }
+                let txn = await algosdk.makeAssetTransferTxnWithSuggestedParams(
+                    sender,
+                    reciever,
+                    undefined,
+                    undefined,
+                    amount*100,
+                    encoder.encode(remarks),
+                    ASSET_ID,
+                    params
+                );
+                return signTransfer(txn);
+            }
+        }catch(err){
+            errorMessage(err);
+        }
+}
+
+//Sign transaction
+async function signTransfer (txn) {
+    const signedTxn = await myAlgoConnect.signTransaction(txn.toByte());
+    const transId = await algodClient.sendRawTransaction(signedTxn.blob).do();
+    return transId;
+}
+
+//Incorrect wallet address 
+function errorMessage (error){
+    if (error.message == "address seems to be malformed"){
+        connected.textContent = "Invalid wallet address"
+        console.log(error.message);
+    }
+    else{
+        connected.textContent = "Transaction failed"
+        console.log(error.message);
+    }
+}
+
+//payment modal
+function paymentModal(){
+    if (localStorage.getItem("Modal") === null) {
+        window.location.assign("/index");
+    }
+    else{
+        let answer = JSON.parse(window.localStorage.getItem('Modal'));
+        document.getElementById("type").innerHTML = answer.asset;
+        document.getElementById("amt").innerHTML = answer.amt;
+        document.getElementById("transId").innerHTML = answer.transId;
+        document.getElementById("recepient").innerHTML = answer.reciever;
+        document.getElementById("note").innerHTML = answer.remark;
+    }
+
+}
diff --git a/HeadlineHackathon/BisiShitta_Bash/modal.css b/HeadlineHackathon/BisiShitta_Bash/modal.css
@@ -0,0 +1,105 @@
+*{
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+}
+body{
+	background-color: lightslategray;
+	font-family: sans-serif;
+}
+.container{
+	background-color: white;
+	width: 100%;
+	padding: 25px;
+	margin: 100px auto 0;
+	box-shadow: 0px 0px 25px #1b1b1b;
+	border-radius: 10px;
+}
+.container h2{
+	background-color: white;
+	font-size: 24px;
+	padding: 15px;
+	margin-bottom: 10px;
+	text-align: center;
+	margin-top: 40px;
+	margin-bottom: 100px;
+	color: blueviolet;
+	font-weight: bold;
+	font-size: 50px;
+}
+.input_g{
+	margin-bottom: 20px;
+	width: 100%;
+	position: relative;
+	display: flex;
+}
+.input_group{
+	margin-bottom: 20px;
+	width: 100%;
+	position: relative;
+	display: flex;
+	padding: 5px 0;
+}
+.input_box{
+	width: 100%;
+	margin-right: 12px;
+	position: relative;
+}
+.input_box h5{
+	color: rgba(137, 43, 226, 0.753);
+	font-size: 30px;
+	font-weight: bold;
+	padding-top: 15px;
+}
+.input_box h6{
+	font-size: 24px;
+	font-weight: bold;
+    padding-bottom: 10px;
+	padding-top: 10px;
+	border-bottom: 3px solid grey;
+	overflow-wrap: break-word;
+	color: grey;
+}
+.input_box label{
+    right:80px;
+	color: rgb(255, 255, 255);
+	font-size: 20px;
+	font-weight: bold;
+    padding-bottom: 15px;
+	padding-top: 15px;
+    position: relative;
+
+}
+html, body {
+    height: 100vh;
+    height: calc(var(--vh, 1vh) * 100);
+}
+.modal {
+    width: 50vw;
+    height: 50vh;
+    height: calc(var(--vh, 1vh) * 50);
+}
+.input_f{
+	margin-bottom: 20px;
+	width: 100%;
+	position: relative;
+	display: flex;
+	flex-direction: row;
+	padding: 5px 0;
+}
+.input_d{
+	width: 100%;
+	margin-right: 12px;
+	position: relative;
+}
+.input_d button{
+	width: 150px;
+	background-color: blueviolet;
+	color: white;
+	border: none;
+	padding: 15px;
+	border-right: 5px;
+	font-size: 16px;
+	transition: all 0.3s ease;
+	border-radius: 10px;
+}