TOWARD WEB3
Integrating a Disclaimer Popup in Web3 Applications
For React Framework
Welcome, today, we'll walk through a simple way to integrate a disclaimer popup into your React web3 application. This could be an essential addition to ensure your users understand the risks associated with blockchain transactions and to mitigate potential legal risks.
Let's break down the implementation into four main parts: the popup component itself, the target page where the disclaimer will appear, the disclaimer text, and how to remember the user's decision. We will be using useState and useEffect from the React Hooks API.
Below you can find a screenshot of the disclaimer. For a live example, you can visit this web3 prototype website: https://softech29.gitlab.io/check-claim/ (more info here).
1. The Popup Component
First let’s look at our PopupDisclaimer component. We've provided a boolean showPopup state to decide whether to display the popup or not. The onAccept and onDecline are callbacks for handling the user's decision:
import React, { useState } from 'react';
import './PopupDisclaimer.css';
function PopupDisclaimer(props) {
// State to manage the visibility of the popup
const [showPopup, setShowPopup] = useState(true);
// Function to handle the "Accept" button click
const handleAccept = () => {
// Hide the popup when the user clicks "Accept"
setShowPopup(false);
};
// Function to handle the "Decline" button click
const handleDecline = () => {
// Hide the popup when the user clicks "Decline"
setShowPopup(false);
// More importantly close the window (other behavior can be considered)
window.close();
};
return (
// Show the popup only when showPopup is true
showPopup && (
<div className="popup-container">
<div className="popup">
<h1>Disclaimer</h1>
<p id="pdisclaimer">This web3 application is provided "as-is" without guarantees. By using it, you acknowledge the risks associated with blockchain transactions, including irretrievable sent funds and potential losses. We don't control the blockchain network or bear responsibility for any losses incurred through use of the application. If you disagree with these terms, close the application immediately.</p>
<div className="buttons">
<button className="accept" onClick={handleAccept}>Accept</button>
<button className="decline" onClick={handleDecline}>Decline</button>
</div>
</div>
</div>
)
);
}
export default PopupDisclaimer;The component also takes a prop argument that is given by the parent component. The argument contains two functions to be called when on accept or decline.
Finally, an example of CSS file that goes with the element can be found at the end of the article in the Annex.
2. The Target Page
In your target page, import the PopupDisclaimer component. Add the following elements:
// import
import PopupDisclaimer from './PopupDisclaimer';
...
return (
<>
...
<PopupDisclaimer/>
...
</>
);
Then, embed the PopupDisclaimer component in your HTML elements. This element can be inserted anywhere. I usually add it at the end of the javascript page.
3. The Disclaimer Text
The used text that I currently use is:
This web3 application is provided “as-is” without guarantees. By using it, you acknowledge the risks associated with blockchain transactions, including irretrievable sent funds and potential losses. We don’t control the blockchain network or bear responsibility for any losses incurred through use of the application. If you disagree with these terms, close the application immediately.
This is only a best-effort disclaimer that I gathered from some existing web3 websites. Please consult with a legal professional to make sure that your disclaimer covers all necessary bases.
4. Remember the User's Decision
You may also want to add the option for the browser to remember the decision so he does not have to choose every time he visits the website. To do this use the following version of thePopupDisclaimer (new elements are commented):
import React, { useState, useEffect } from 'react'; // import useEffect
import './PopupDisclaimer.css';
function PopupDisclaimer(props) {
const [showPopup, setShowPopup] = useState(true);
// State to manage the checkbox selection (whether user wants to remember decision)
const [rememberDecision, setRememberDecision] = useState(false);
// useEffect to check and set the initial state based on localStorage
useEffect(() => {
const decision = localStorage.getItem('rememberDecision');
if (decision === 'true') {
// If user previously accepted and chose to remember the decision, hide the popup
setShowPopup(false);
}
}, []);
const handleAccept = () => {
setShowPopup(false);
// If the user has checked the "Remember my decision" checkbox, save the decision in localStorage
if (rememberDecision) {
localStorage.setItem('rememberDecision', 'true');
}
};
const handleDecline = () => {
setShowPopup(false);
window.close();
};
// Function to handle the checkbox change event
const handleRememberDecisionChange = (event) => {
// Update the state of rememberDecision based on the checkbox selection
setRememberDecision(event.target.checked);
};
return (
showPopup && (
<div className="popup-container">
<div className="popup">
<h1>Disclaimer</h1>
<p id="pdisclaimer">
This web3 application is provided "as-is" without guarantees. By using it, you acknowledge the risks associated with blockchain transactions, including irretrievable sent funds and potential losses. We don't control the blockchain network or bear responsibility for any losses incurred through use of the application. If you disagree with these terms, close the application immediately.
</p>
<div className="buttons">
<button className="accept" onClick={handleAccept}>
Accept
</button>
<button className="decline" onClick={handleDecline}>
Decline
</button>
</div>
{/* Added the following lines to display the checkbox */}
<label>
<input
type="checkbox"
checked={rememberDecision}
onChange={handleRememberDecisionChange}
/>
Remember my decision
</label>
</div>
</div>
)
);
}
export default PopupDisclaimer;The handleRememberDecisionChange function toggles the rememberDecision state and stores it in localStorage if the user accepts the disclaimer.
Conclusion
That's it! With this setup, your web3 application will now display a disclaimer popup when the user first lands on your page. If the user accepts the terms, the popup will not appear on subsequent visits.
Please note that this is a simplified example and the actual integration might vary based on the specifics of your application. We hope you found this article helpful! Be sure to check back for more web3 development tutorials.
Annex
The used CSS file:
.popup-container {
display: flex;
justify-content: center;
align-items: center;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
color: black;
background-color: rgba(0, 0, 0, 0.5);
}
.popup {
position: relative;
padding: 20px;
border-radius: 5px;
background-color: white;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
text-align: center;
max-width: 600px;
}
.popup h1 {
font-size: 24px;
font-weight: bold;
margin-bottom: 20px;
margin-top: 0;
}
.popup p {
font-size: 16px;
margin-bottom: 20px;
text-align: center;
margin-bottom: 20px;
}
.buttons {
display: flex;
justify-content: center;
}
.accept {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
margin-right: 10px;
border: none;
border-radius: 5px;
cursor: pointer;
}
#pdisclaimer {
text-align: justify;
}
.decline {
background-color: #f44336;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
