diff --git a/DevGrants/Peace/index.html b/DevGrants/Peace/index.html new file mode 100644 index 000000000..eed9ea1f7 --- /dev/null +++ b/DevGrants/Peace/index.html @@ -0,0 +1,36 @@ + + + + + + + +
+
+ +
+ +
+

or

+
+ +
+ +
+
+ + +
+ +
+

Cast your votes above

+
+ +
+ +
+
+ + + + diff --git a/DevGrants/Peace/script.js b/DevGrants/Peace/script.js new file mode 100644 index 000000000..08fa2b299 --- /dev/null +++ b/DevGrants/Peace/script.js @@ -0,0 +1,93 @@ +// Retrieve AlgoSigner sdk from the browser +const { AlgoSigner } = window; + +//define the adddresses +const red_address = ""; +const blue_address = ""; + +//Get DOM Elements +const submitBtn = document.querySelector(".submit"); +const connectWallet = document.querySelector(".connect"); +const yes = document.querySelector(".true"); +const no = document.querySelector(".false"); + +let yesOrNo = ""; +const setValue = (value) => { + yesOrNo = value; +}; +//Function to Connect User's Account +const ConnectAccount = async () => { + //Check if AlgoSigner is installed + if (!AlgoSigner) { + return alert("Please install AlgoSigner"); + } + + //Connect Account if AlgoSigner is installed + await AlgoSigner.connect() + .then((d) => {}) + .catch((e) => console.log("error in connection")); +}; + +// Sign the Transaction +const signTransaction = async (receiver = blue_address) => { + const txn = await AlgoSigner.algod({ + ledger: "TestNet", + path: "/v2/transactions/params", + }) + .then((e) => { + return e; + }) + .catch((e) => console.log("error in algod")); + + //retrieve account details + const account = await AlgoSigner.accounts({ + ledger: "TestNet", + }) + .then((value) => value[0]) + .then((result) => { + const { address } = result; + + return address; + }) + + .catch((e) => console.log("cannot retrieve accounts")); + + //Transaction signature + await AlgoSigner.sign({ + from: account, + to: receiver, + amount: document.querySelector("hi"), + note: "voting", + fee: txn["min-fee"], + }) + .then(() => console.log("complete")) + .catch((e) => console.log("error", e)); +}; + +connectWallet.addEventListener("click", async (e) => { + await ConnectAccount(); + connectWallet.value = "Connected"; +}); + +radion.forEach((item) => { + item.addEventListener("click", (e) => { + setValue(e.target.value); + }); +}); + +submitBtn.addEventListener("click", (e) => { + console.log("welcome user"); + + //checks to see if the user click an option + if (!yesOrNo) { + alert("Please click either yes or no"); + return; + } + if (yesOrNo == "Yes") { + signTransaction(blue_address); + } + if (yesOrNo == "No") { + signTransaction(red_address); + } + alert(`Transaction successful in successful in ${yesOrNo}`); +}); diff --git a/DevGrants/Peace/style.css b/DevGrants/Peace/style.css new file mode 100644 index 000000000..ebb5e5efa --- /dev/null +++ b/DevGrants/Peace/style.css @@ -0,0 +1,153 @@ +* { + padding: 10px; + margin: 0; + box-sizing: border-box; + list-style: none; + text-decoration: none; + border: none; +} + +body { + display: flex; + align-items: center; + justify-content: space-around; + flex-direction: column; + min-height: 97vh; + background: linear-gradient(rgba(9, 196, 133, 0.644), #fff); +} + +.container { + width: 25%; + background: transparent; + border-radius: 5px; + box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, + rgba(0, 0, 0, 0.22) 0px 10px 10px; +} + +.connect { + display: flex; + justify-content: center; + align-items: center; + margin-bottom: 10px; +} + +.connect button { + border-radius: 8px; + font-size: 12px; + letter-spacing: 2px; + font-weight: 800; + color: #fff; + width: 200px; + padding: 12px; + font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; + background-color: transparent; + box-shadow: rgba(0, 0, 0, 0.146) 0px 14px 28px, + rgba(0, 0, 0, 0.112) 0px 10px 10px; +} + +.second { + padding: 25px; + margin-left: -20px; + display: flex; + align-items: center; + justify-content: center; +} + +.second ::placeholder { + font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; + color: rgba(128, 128, 128, 0.167); + padding: 10px; + letter-spacing: 2px; + color: rgba(0, 0, 0, 0.438); + font-weight: 800; + text-transform: capitalize; +} + +.second input { + margin-left: 10px; + border-radius: 5px; + width: 100%; + height: 30px; + background-color: rgba(255, 255, 255, 0.356); +} + +.second input:focus { + outline: none; +} + +.third { + padding: 75px; + margin-left: 10px; + margin-right: 10px; + border: 1px solid rgba(46, 47, 46, 0.311); + background-color: rgba(154, 154, 154, 0.112); + border-radius: 5px; +} + +.third h4 { + letter-spacing: 2px; + font-size: 16px; + font-weight: 800; + color: rgba(255, 255, 255, 0.503); + text-transform: capitalize; + width: 120%; +} + +.rand-btn { + padding: 20px; + display: flex; + justify-content: space-between; + color: #000; + font-weight: bolder; +} + +.rand-btn input { + font-weight: 800; + font-size: 15px; + width: 100px; + padding: 7px; + border-radius: 8px; + font-weight: 800; + color: #fff; +} + +.rand-btn .true { + background-color: transparent; + border: 1px solid rgba(0, 0, 0, 0.267); +} +.rand-btn .false { + background-color: transparent; + border: 1px solid rgba(0, 0, 0, 0.267); +} + +.submit { + padding: 20px; + display: flex; + justify-content: center; + align-items: center; +} + +.submit input { + background-color: white; + width: 70%; + padding: 13px; + border: none; + border-radius: 5px; + font-weight: bold; + color: white; + background-color: rgba(0, 0, 0, 0.438); + box-shadow: rgba(0, 0, 0, 0.171) 0px 14px 28px, + rgba(0, 0, 0, 0.112) 0px 10px 10px; + letter-spacing: 2px; +} + +.condition { + height: 27px; + color: #fff; + display: flex; + align-items: center; + justify-content: center; + margin: -15px 5px -15px 5px; + font-weight: 800; + font-size: 20px; +}