Skip to content

Commit 2fd7e61

Browse files
hackertronhackertron
committed
stumble without wallet/metamask implemented
Added connect button UI tour url validation added. logs and alert error when same url is submitted again, if wrong url was submitted before, it tries to make it valid url using fixurl function Changed stumbleupon to channel4 and added feedback button
1 parent 2a6bcb0 commit 2fd7e61

3 files changed

Lines changed: 87 additions & 20 deletions

File tree

‎frontend/index.html‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,39 +4,41 @@
44
<meta charset="UTF-8">
55
<meta http-equiv="X-UA-Compatible" content="IE=edge">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<title>StumbleUpon POC</title>
7+
<title>Channel4 POC</title>
88
<link rel="stylesheet" href="style.css">
99
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/shepherd.js@10.0.1/dist/css/shepherd.css"/>
1010
</head>
1111
<body>
1212
<!-- Navbar -->
1313
<nav class="navbar">
1414
<div class="navbar-logo">
15-
<a href="#"><img src="logo.png" alt="StumbleUpon Logo"></a>
16-
<span class="navbar-title">StumbleUpon</span>
15+
<a href="#" onclick="window.location.reload()"><img src="logo.png" alt="Channel4 Logo"></a>
16+
<span class="navbar-title">Channel4</span>
1717
</div>
1818
<div class="navbar-buttons">
1919
<form class="navbar-form">
20-
<input class="url-input" id="stumble-url" type="text" placeholder="submit URL for others">
21-
<button type="button" navbar-button" id ="submitUrlButton"style="border-radius: 10px; font-size: large;">&#8680;</button>
22-
<!-- <button class="submit-button" type="submit">Submit</button> -->
20+
<input type="url" class="url-input" id="stumble-url" placeholder="submit URL for others" pattern="https?://.+" required>
21+
<button type="button" class ="navbar-button" id ="submitUrlButton"style="border-radius: 10px; font-size: large;">&#8680;</button>
22+
<!-- <input type="submit" class="navbar-button" value="&#8680;" id="submitUrlButton" style="border-radius: 10px; font-size: large;" onclick="this.preventDefault()"> -->
2323
</form>
2424
<button id="upvoteButton" class="navbar-button" style="border-radius: 10px; font-size: large;">&#x1F44D;</button>
2525
<button id="stumbleButton" class="navbar-button" style="border-radius: 10px; font-size: large;">Stumble</button>
2626
<button id="downvoteButton" class="navbar-button" style="border-radius: 10px; font-size: large;">&#x1F44E;</button>
2727
</div>
2828
<div class="navbar-right">
2929

30-
30+
<button id="connectButton" style="border-radius: 10px; font-size: large;">Connect</button>
3131
<button id="openChannel" style="border-radius: 10px; font-size: large;">OpenChannel</button>
3232
<button id="closeChannel" style="border-radius: 10px; font-size: large;" disabled="true">closeChannel</button>
3333
<button id="tour-start" class="navbar-title" onclick="tour.start()" style="border-radius: 10px; font-size: large;">&#x3F;</button>
34+
<button id="feedback" style="border-radius: 10px; font-size: large;" onclick="window.open('https://airtable.com/shrGNTW2IFm2o0cKJ','_blank')">Feedback</button>
35+
3436
</div>
3537
</nav>
3638

3739
<!-- Iframe -->
3840
<div class="iframe-container">
39-
<iframe class="iframe" id="stumble-iframe" src="https://channel4.wtf/" frameborder="0"></iframe>
41+
<iframe sandbox ="allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-popups-to-escape-sandbox allow-presentation allow-same-origin allow-scripts" class="iframe" id="stumble-iframe" src="https://channel4.wtf/" frameborder="0"></iframe>
4042
</div>
4143
<script src="index.js" type="module"></script>
4244
<script src="https://cdn.jsdelivr.net/npm/shepherd.js@10.0.1/dist/js/shepherd.min.js"></script>

‎frontend/index.js‎

Lines changed: 46 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ const closeChannelButton = document.getElementById("closeChannel");
1010
const upvoteButton = document.getElementById("upvoteButton");
1111
const downvoteButton = document.getElementById("downvoteButton");
1212

13+
connectButton.onclick = connect;
1314
submitUrlButton.onclick = submiturl;
1415
stumbleButton.onclick = stumble;
1516
openChannelButton.onclick = openChannel;
@@ -78,8 +79,23 @@ async function closeChannel() {
7879
}
7980
}
8081

82+
function checkHttpUrl(url) {
83+
let givenURL;
84+
try {
85+
givenURL = new URL(url);
86+
} catch (error) {
87+
console.log("error is",error)
88+
return false;
89+
}
90+
return givenURL.protocol === "http:" || givenURL.protocol === "https:";
91+
}
92+
8193
async function submiturl() {
8294
let url = document.getElementById("stumble-url").value;
95+
if (!checkHttpUrl(url)) {
96+
alert("invalid url")
97+
return
98+
}
8399
console.log("submit url : ", url);
84100
if (typeof window.ethereum != "undefined") {
85101
// provider / connection to the blockchain
@@ -97,7 +113,10 @@ async function submiturl() {
97113
await listenForTransactionMined(transactionResponse, provider);
98114
console.log("Done!!");
99115
} catch (error) {
100-
console.log(error);
116+
error = JSON.stringify(error)
117+
error = JSON.parse(error);
118+
console.log(error.error);
119+
alert(error.error.message);
101120
}
102121
}
103122
}
@@ -235,20 +254,41 @@ function getRndInteger(min, max) {
235254
return Math.floor(Math.random() * (max - min)) + min;
236255
}
237256

257+
258+
function fixUrl(url) {
259+
// Regular expression to check URL format with "http://" or "https://"
260+
const urlPattern = /^(https?:\/\/)[^\s/$.?#].[^\s]*$/i;
261+
262+
if (!urlPattern.test(url)) {
263+
// Invalid URL format, add "https://" to the beginning of the URL
264+
url = `https://${url}`;
265+
}
266+
267+
return url;
268+
}
269+
270+
238271
async function stumble() {
239272
let url = "";
240-
if (typeof window.ethereum != "undefined") {
241-
const provider = new ethers.providers.Web3Provider(window.ethereum);
242-
const signer = provider.getSigner();
243-
const contract = new ethers.Contract(contractAddress, abi, signer);
273+
const provider = new ethers.providers.JsonRpcProvider("https://rpc.sepolia.org");
274+
const contract = new ethers.Contract(contractAddress, abi, provider);
275+
// if (typeof window.ethereum != "undefined") {
276+
// const provider = new ethers.providers.Web3Provider(window.ethereum);
277+
// const signer = provider.getSigner();
278+
// const contract = new ethers.Contract(contractAddress, abi, signer);
279+
// }
244280
const array_length = await contract.urlArray_length();
281+
console.log("array length : ", array_length.toNumber());
245282
const index = getRndInteger(0, array_length.toNumber());
246283

247284
url = await contract.urlArray_element(index);
248285
console.log(url);
249-
}
286+
url = fixUrl(url);
287+
console.log("fixed url : ", url);
288+
250289
// modify iframe url
251290
var stumble_iframe = document.getElementById("stumble-iframe");
291+
console.log("iframe : ", stumble_iframe.src);
252292
stumble_iframe.src = url;
253293
document.getElementById("stumble-iframe").contentWindow.location.reload(true);
254294

‎frontend/tour.js‎

Lines changed: 31 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ const tour = new Shepherd.Tour({
2020

2121
// Add the steps to the tour
2222
tour.addStep({
23-
title: 'Welcome to StumbleUpon',
23+
title: 'Welcome to Channel4',
2424
text: 'This is the navbar, which contains links to different parts of the site.',
2525
attachTo: {
2626
element: '.navbar',
@@ -40,8 +40,8 @@ const tour = new Shepherd.Tour({
4040
});
4141

4242
tour.addStep({
43-
title: 'StumbleUpon Logo',
44-
text: 'This is the StumbleUpon logo, which will take you back to the homepage if you click it.',
43+
title: 'Channel4 Logo',
44+
text: 'This is the Channel4 logo, which will take you back to the homepage if you click it.',
4545
attachTo: {
4646
element: '.navbar-logo',
4747
on: 'bottom'
@@ -91,7 +91,7 @@ const tour = new Shepherd.Tour({
9191

9292
tour.addStep({
9393
title: 'Submit Button',
94-
text: 'This is the submit button, which you can use to submit the URL you entered in the input field.',
94+
text: 'This is the submit button, which you can use to submit the URL you entered in the input field. <code><b>Wallet connection needed for this action</b></code>',
9595
attachTo: {
9696
element: '#submitUrlButton',
9797
on: 'bottom'
@@ -116,7 +116,7 @@ const tour = new Shepherd.Tour({
116116

117117
tour.addStep({
118118
title: 'Upvote Button',
119-
text: 'This is the upvote button, which you can use to show your approval of a page.',
119+
text: 'This is the upvote button, which you can use to show your approval of a page. <code><b>Wallet connection needed for this action</b></code>',
120120
attachTo: {
121121
element: '#upvoteButton',
122122
on: 'bottom'
@@ -166,7 +166,7 @@ const tour = new Shepherd.Tour({
166166

167167
tour.addStep({
168168
title: 'Downvote Button',
169-
text: 'This is the downvote button, which you can use to show your disapproval of a page.',
169+
text: 'This is the downvote button, which you can use to show your disapproval of a page.<code><b>Wallet connection needed for this action</b></code>',
170170
attachTo: {
171171
element: '#downvoteButton',
172172
on: 'bottom'
@@ -239,6 +239,31 @@ const tour = new Shepherd.Tour({
239239
]
240240
});
241241

242+
tour.addStep({
243+
title: 'Connect Button',
244+
text: 'Connect button connects your metamask wallet with the site. In order to perform any on-chain action like upvote/downvote or submitting url, you must connect first.',
245+
attachTo: {
246+
element: '#connectButton',
247+
on: 'bottom'
248+
},
249+
buttons: [
250+
{
251+
text: 'Skip',
252+
action: tour.cancel,
253+
classes: 'shepherd-button-secondary'
254+
},
255+
{
256+
text: 'Back',
257+
action: tour.back,
258+
classes: 'shepherd-button-secondary'
259+
},
260+
{
261+
text: 'Next',
262+
action: tour.next
263+
}
264+
]
265+
});
266+
242267
// Initiate the tour
243268
if(!localStorage.getItem('shepherd-tour')) {
244269
// Start the tour

0 commit comments

Comments
 (0)