react-share#TwitterShareButton JavaScript Examples
The following examples show how to use
react-share#TwitterShareButton.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: share.js From blog with Apache License 2.0 | 8 votes |
|
ShareButton = (props) => {
const { location, siteMetadata, post } = props;
const twitter = [ siteMetadata.social.twitter ];
const url = siteMetadata.siteUrl + location.pathname;
const iconSize = 30;
const iconStyle = {
paddingRight: "0.3em",
marginBottom: "0.2em"
};
return (
<>
<TwitterShareButton url={url} quote={url} title={post.title} hashtags={post.tags} related={twitter} style={iconStyle}>
<TwitterIcon size={iconSize}/>
</TwitterShareButton>
<LinkedinShareButton url={url} title={post.title} quote={url} source={siteMetadata.siteUrl} style={iconStyle}>
<LinkedinIcon size={iconSize}/>
</LinkedinShareButton>
<FacebookShareButton url={url} quote={url} style={iconStyle}>
<FacebookIcon size={iconSize}/>
</FacebookShareButton>
<RedditShareButton url={url} quote={url} title={post.title} style={iconStyle}>
<RedditIcon size={iconSize}/>
</RedditShareButton>
<EmailShareButton url={url} quote={url} subject={post.title} style={iconStyle}>
<EmailIcon size={iconSize}/>
</EmailShareButton>
</>
);
}
Example #2
| Source File: request_utils.js From covidsos with MIT License | 7 votes |
|
getShareButtons = (accept_link = 'https://wa.me/918618948661/', helpText) => {
return (
<>
<span className='share-icon'>
<WhatsappShareButton
url={accept_link}
title={helpText}>
<WhatsappIcon size={32} round/>
</WhatsappShareButton>
</span>
<span className='share-icon'>
<FacebookShareButton
url={accept_link}
quote={helpText}>
<FacebookIcon size={32} round/>
</FacebookShareButton>
</span>
<span className=''>
<TwitterShareButton
url={accept_link}
title={helpText}>
<TwitterIcon size={32} round/>
</TwitterShareButton>
</span>
</>
);
}
Example #3
| Source File: SocialMediaButtons.js From covid-19 with MIT License | 6 votes |
|
SocialMediaButtons = (props) => {
const location = useLocation();
let url;
if (props.url) {
url = props.url;
} else {
url = 'https://covid-19.direct' + location.pathname;
}
const bgStyle = {};
if (props.backgroundColor) {
bgStyle.fill = props.backgroundColor;
}
return (
<div className={props.className}>
{[
[FacebookShareButton, FacebookIcon],
[TwitterShareButton, TwitterIcon],
[RedditShareButton, RedditIcon],
[WhatsappShareButton, WhatsappIcon],
[EmailShareButton, EmailIcon],
].map(([Button, Icon], i) => (
<Button className={props.buttonClassName} url={url} quote={QUOTE} key={i}>
<Icon
size={props.size || '1em'}
round={true}
bgStyle={bgStyle}
iconFillColor={props.iconColor}
/>
</Button>
))}
</div>
);
}
Example #4
| Source File: ShareButtons.jsx From koronawirus.lol with GNU Affero General Public License v3.0 | 6 votes |
|
ShareButtons = ({ }) => (
<>
<ShareButtonContainer>
<FacebookShareButton url={url}>
<FacebookIcon size={32} round />
</FacebookShareButton>
<button className="react-share__ShareButton" style={{ background: 'white', border: 0, margin: 0, paddingLeft: 0 }} onClick={() => {
window.location.href = `fb-messenger://share?link=${url}`
}}>
<FacebookMessengerIcon size={32} round />
</button>
<TwitterShareButton url={url}>
<TwitterIcon size={32} round />
</TwitterShareButton>
<TelegramShareButton url={url}>
<TelegramIcon size={32} round />
</TelegramShareButton>
<LinkedinShareButton url={url}>
<LinkedinIcon size={32} round />
</LinkedinShareButton>
</ShareButtonContainer>
</>
)
Example #5
| Source File: share.js From rg-portfolio with MIT License | 6 votes |
|
Share = ({ socialConfig }) => {
return (
<div className="post-social">
<h6 className="title is-6">Share:</h6>
<FacebookShareButton
url={socialConfig.config.url}
className="button is-outlined is-rounded facebook"
>
<span className="icon">
<i className="fab fa-facebook-f"></i>
</span>
<span className="text">Facebook</span>
</FacebookShareButton>
<TwitterShareButton
url={socialConfig.config.url}
className="button is-outlined is-rounded twitter"
title={socialConfig.config.title}
via="_rohitguptab"
>
<span className="icon">
<i className="fab fa-twitter"></i>
</span>
<span className="text">Twitter</span>
</TwitterShareButton>
<WhatsappShareButton
url={socialConfig.config.url}
className="button is-outlined is-rounded whatsapp"
title={socialConfig.config.title}
>
<span className="icon">
<i className="fab fa-whatsapp"></i>
</span>
<span className="text">WhatsApp</span>
</WhatsappShareButton>
</div>
);
}
Example #6
| Source File: SocialLinks.js From paigeniedringhaus.com with MIT License | 6 votes |
|
SocialLinks = (props) => {
const { postNode, postPath } = props;
const post = postNode.frontmatter;
const url = urljoin(config.siteUrl, config.pathPrefix, postPath);
return (
<div className="social-links">
<span>If you found this useful:</span>
<TwitterShareButton url={url} title={`${post.title} ✍️ @pniedri`}>
Share on Twitter
</TwitterShareButton>
</div>
);
}
Example #7
| Source File: templateButtons.js From fcgec-web-app with MIT License | 6 votes |
|
TemplateButtons = ({ where, slug }) => {
let shareUrl;
if (where === 'members')
shareUrl = ` https://gecfoss.club/${slug}`
else
shareUrl = ` https://gecfoss.club/${where}/${slug}`
if (where === 'members')
shareUrl = shareUrl.replace(/^/, "Check out this FCGEC member's profile!\n");
else if (where === 'blog')
shareUrl = shareUrl.replace(/^/, "Check out this Blog post on FOSS Club GEC!\n");
else if (where === 'events')
shareUrl = shareUrl.replace(/^/, "Check out this Event on FOSS Club GEC!\n");
else if (where === 'projects')
shareUrl = shareUrl.replace(/^/, "Check out this Project on FOSS Club GEC!\n");
return (
<div className={templateButtonsStyles.buttons}>
<BackButton where={where} />
<div className={templateButtonsStyles.share}>
<EmailShareButton url={shareUrl}>
<EmailIcon size={48} />
</EmailShareButton>
<WhatsappShareButton url={shareUrl}>
<WhatsappIcon size={48} />
</WhatsappShareButton>
<LinkedinShareButton url={shareUrl}>
<LinkedinIcon size={48} />
</LinkedinShareButton>
<TwitterShareButton url={shareUrl}>
<TwitterIcon size={48} />
</TwitterShareButton>
</div>
</div>
)
}
Example #8
| Source File: social-share.js From taskforce-fe-components with Mozilla Public License 2.0 | 6 votes |
|
SocialsShare = ({ currentPage }) => {
return (
<div className="__social-share-container">
<span>Distribuie pe</span>
<FacebookShareButton url={currentPage}>
<FacebookIcon round={true} size={30}></FacebookIcon>
</FacebookShareButton>
<LinkedinShareButton url={currentPage}>
<LinkedinIcon round={true} size={30}></LinkedinIcon>
</LinkedinShareButton>
<TwitterShareButton url={currentPage}>
<TwitterIcon round={true} size={30}></TwitterIcon>
</TwitterShareButton>
</div>
);
}
Example #9
| Source File: Share.js From agility-website-gatsby with MIT License | 6 votes |
|
render() {
if (typeof window === 'undefined') {
return <div className="share"></div>
}
const item = this.props.item.customFields;
return (
<div className="share">
<label>{item.shareLabel}</label>
{item.facebook &&
<FacebookShareButton quote={document.title} url={window.location.href} className="SocialMediaShareButton">
<FacebookIcon size={36} round />
</FacebookShareButton>
}
{item.twitter &&
<TwitterShareButton quote={document.title} url={window.location.href} className="SocialMediaShareButton">
<TwitterIcon size={36} round />
</TwitterShareButton>
}
{item.linkedIn &&
<LinkedinShareButton quote={document.title} url={window.location.href} className="SocialMediaShareButton">
<LinkedinIcon size={36} round />
</LinkedinShareButton>
}
</div>
);
}
Example #10
| Source File: Share.js From say-their-names-web with MIT License | 6 votes |
|
Share = (props) => {
const { url, socialCopy } = props;
return (
<ShareStyle>
<h3>Share</h3>
<ShareSection>
<TwitterShareButton url={url} title={socialCopy}>
<p>
<i className="fab fa-twitter" />
Twitter
</p>
</TwitterShareButton>
</ShareSection>
<ShareSection>
<FacebookShareButton url={url} quote={socialCopy}>
<p>
<i className="fab fa-facebook-square" />
Facebook
</p>
</FacebookShareButton>
</ShareSection>
<ShareSection>
<WhatsappShareButton url={url} title={socialCopy}>
<p>
<i className="fab fa-whatsapp-square" />
Whatsapp
</p>
</WhatsappShareButton>
</ShareSection>
</ShareStyle>
);
}
Example #11
| Source File: share.js From open-jobboard with Apache License 2.0 | 6 votes |
|
Share = ({ socialConfig }) => {
return (
<div className="post-social">
<FacebookShareButton url={socialConfig.config.url} className="button is-outlined is-rounded facebook" >
<span className="icon">
<img alt="facebook icon" src={facebookIcon} />
</span>
</FacebookShareButton>
<TwitterShareButton url={socialConfig.config.url} className="button is-outlined is-rounded twitter" title={socialConfig.config.title} via={socialConfig.twitterHandle.split('@').join('')}>
<span className="icon">
<img alt="twiiter icon" src={twitterIcon} />
</span>
</TwitterShareButton>
<LinkedinShareButton url={socialConfig.config.url} className="button is-outlined is-rounded linkedin" title={socialConfig.config.title} >
<span className="icon">
<img alt="linkedin icon" src={linkedinIcon} />
</span>
</LinkedinShareButton>
</div>
)
}
Example #12
| Source File: ShareButtons.jsx From Corona-tracker with MIT License | 6 votes |
|
ShareButtons = () => {
const url = 'https://coronatracker.squarespace.com';
return (
<>
<FacebookShareButton url={url}>
<FacebookIcon size={32} round />
</FacebookShareButton>
<LinkedinShareButton url={url}>
<LinkedinIcon size={32} round />
</LinkedinShareButton>
<TwitterShareButton url={url}>
<TwitterIcon size={32} round />
</TwitterShareButton>
<RedditShareButton url={url}>
<RedditIcon size={32} round />
</RedditShareButton>
<TelegramShareButton url={url}>
<TelegramIcon size={32} round />
</TelegramShareButton>
</>
);
}
Example #13
| Source File: TokenShareModal.js From paras-landing with GNU General Public License v3.0 | 6 votes |
|
Share = ({ show, onClose, tokenData }) => {
const ShareList = [
{
name: (
<FacebookShareButton url={window.location.href} className="flex text-white">
<FacebookIcon size={24} round />
<p className="ml-3">Facebook</p>
</FacebookShareButton>
),
onClick: () => {},
},
{
name: (
<TwitterShareButton
title={`Checkout ${tokenData.metadata.title} from collection ${tokenData.metadata.collection} on @ParasHQ\n\n#paras #cryptoart #digitalart #tradingcards`}
url={window.location.href}
className="flex text-white"
>
<TwitterIcon size={24} round />
<p className="ml-3">Twitter</p>
</TwitterShareButton>
),
onClick: () => {},
},
{
name: (
<TelegramShareButton url={window.location.href} className="flex text-white">
<TelegramIcon size={24} round />
<p className="ml-3">Telegram</p>
</TelegramShareButton>
),
onClick: () => {},
},
]
return <ListModal show={show} onClose={onClose} list={ShareList} />
}
Example #14
| Source File: index.js From gatsby-blog-mdx with MIT License | 6 votes |
|
ShareButtons = ({ location }) => {
return (
<div className="share-buttons-wrap">
{config.shareButtons.email && (
<EmailShareButton url={location}>
<EmailIcon round size={32} />
</EmailShareButton>
)}
{config.shareButtons.facebook && (
<FacebookShareButton url={location}>
<FacebookIcon round size={32} />
</FacebookShareButton>
)}
{config.shareButtons.twitter && (
<TwitterShareButton url={location}>
<TwitterIcon round size={32} />
</TwitterShareButton>
)}
{config.shareButtons.reddit && (
<RedditShareButton url={location}>
<RedditIcon round size={32} />
</RedditShareButton>
)}
{config.shareButtons.linkedIn && (
<LinkedinShareButton url={location}>
<LinkedinIcon round size={32} />
</LinkedinShareButton>
)}
</div>
)
}
Example #15
| Source File: ShareComponent.js From paras-landing with GNU General Public License v3.0 | 6 votes |
|
ShareComponent = ({ title, shareUrl }) => {
const { localeLn } = useIntl()
return (
<div className="flex items-center space-x-2 justify-between">
<div className="text-white text-sm opacity-80 pr-4">{localeLn('ShareNow')}</div>
<div className="flex space-x-3">
<FacebookShareButton
url={shareUrl}
quote={title}
className="Demo__some-network__share-button"
>
<FacebookIcon size={24} round />
</FacebookShareButton>
<TwitterShareButton
url={shareUrl}
title={title}
className="Demo__some-network__share-button"
>
<TwitterIcon size={24} round />
</TwitterShareButton>
<TelegramShareButton
url={shareUrl}
title={title}
className="Demo__some-network__share-button"
>
<TelegramIcon size={24} round />
</TelegramShareButton>
</div>
</div>
)
}
Example #16
| Source File: sharebuttons.js From staticwebsitehosting with MIT License | 5 votes |
|
buttonConfigs = {
twitter: { Button: TwitterShareButton, Icon: TwitterIcon },
facebook: { Button: FacebookShareButton, Icon: FacebookIcon },
reddit: { Button: RedditShareButton, Icon: RedditIcon },
}
Example #17
| Source File: ShareCard.js From neighborhood-chef-fe with MIT License | 5 votes |
|
Components = {
Facebook: FacebookShareButton,
Twitter: TwitterShareButton,
Text: WhatsappShareButton,
Email: EmailShareButton,
}
Example #18
| Source File: Dashboard.js From shopping-cart-fe with MIT License | 5 votes |
|
Dashboard = () => {
const dispatch = useDispatch();
useEffect(() => {
dispatch(creators.getCurrentUser());
}, [dispatch]);
const user = useSelector((state) => state.user.user);
const url = `${window.location.origin.toString()}/store/${
user && user.storeName && user.storeName.toLowerCase().split(' ').join('-')
}-${user && user._id}`;
const storeLogo = user.imageUrl ? user.imageUrl : NoLogo;
const copied = () => {
message.success('url copied successfully');
};
return (
<div className='mainDiv' data-testid='dashboardMainDiv'>
<div className='dashboardHeader'>
<div className='welcomeHeader'>
Welcome, <br />
<span className='name'>
{user.ownerName ? user.ownerName : 'Seller'}!
</span>
</div>
<div className='dashboardLogo'>
<img src={storeLogo} alt='Store Logo' />
</div>
</div>
<div className='storeUrl'>
<p id='storeUrl' style={{ marginBottom: '1.3rem' }}>
{user && url}
</p>
<CopyToClipboard text={url}>
<span>
<Button ghost onClick={copied}>
Copy URL
</Button>
</span>
</CopyToClipboard>
<div className='share'>
<FacebookShareButton url={user && url}>
<FacebookIcon size={32} round />
</FacebookShareButton>
<TwitterShareButton url={user && url}>
<TwitterIcon size={32} round />
</TwitterShareButton>
<LinkedinShareButton url={user && url}>
<LinkedinIcon size={32} round />
</LinkedinShareButton>
<WhatsappShareButton url={user && url}>
<WhatsappIcon size={32} round />
</WhatsappShareButton>
<EmailShareButton url={user && url}>
<EmailIcon size={32} round />
</EmailShareButton>
</div>
</div>
<div className='dashDiv'>
<Content storeId={user._id} currency={user.currency} />
</div>
</div>
);
}
Example #19
| Source File: ShareModal.js From mern-social-media with MIT License | 5 votes |
|
ShareModal = ({ url, theme, setIsShare }) => {
return (
<div className="share_modal">
<div className="share_modal-container">
<div className="share_modal-header">
<span>Share to...</span>
<span onClick={() => setIsShare(false)}>×</span>
</div>
<div
className=" share_modal-body"
style={{ filter: theme ? "invert(1)" : "invert(0)" }}
>
<FacebookShareButton url={url}>
<FacebookIcon round={true} size={32} />
</FacebookShareButton>
<TwitterShareButton url={url}>
<TwitterIcon round={true} size={32} />
</TwitterShareButton>
<EmailShareButton url={url}>
<EmailIcon round={true} size={32} />
</EmailShareButton>
<TelegramShareButton url={url}>
<TelegramIcon round={true} size={32} />
</TelegramShareButton>
<WhatsappShareButton url={url}>
<WhatsappIcon round={true} size={32} />
</WhatsappShareButton>
<PinterestShareButton url={url}>
<PinterestIcon round={true} size={32} />
</PinterestShareButton>
<RedditShareButton url={url}>
<RedditIcon round={true} size={32} />
</RedditShareButton>
<LinkedinShareButton url={url}>
<LineIcon round={true} size={32} />
</LinkedinShareButton>
</div>
</div>
</div>
);
}
Example #20
| Source File: ShareLink.js From python-level-challenge with MIT License | 5 votes |
|
render(){
const { href } = this.state;
return(
<Wrapper>
{/* TODO ADD URL */}
<Row>
<FacebookShareButton url={href}>
<Icon src={'../../static/img/shareIcon/facebook.svg'} />
</FacebookShareButton>
</Row>
<Row>
<TwitterShareButton url={href}>
<Icon src={'../../static/img/shareIcon/twitter.svg'} />
</TwitterShareButton>
</Row>
<CopyToClipboard text={href}>
<Row onClick={this.handleClickOpen}>
<Icon src={'../../static/img/shareIcon/copy.svg'} />
</Row>
</CopyToClipboard>
<Dialog
open={this.state.clicked}
onClose={this.handleClose}
aria-labelledby='alert-dialog-title'
aria-describedby='alert-dialog-description'>
<DialogTitle id='alert-dialog-title'>
{'URL copied to clipboard'}
</DialogTitle>
<DialogContent>
<DialogContentText
id='alert-dialog-description'
style={{overflow: "hidden", textOverflow: "ellipsis"}}>
{href}
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={this.handleClose} variant='contained' color='primary'>
{'Ok'}
</Button>
</DialogActions>
</Dialog>
</Wrapper>
)
}
Example #21
| Source File: nearme.jsx From howlongistheline.org with Mozilla Public License 2.0 | 4 votes |
|
function Index({ history }) {
{/*Initialise props*/ }
const [clientLocation, setclientLocation] = useCookies(['location']);
const [nearestShops, setnearestShops] = useState([]);
const [loading, setLoading] = useState(false);
const [loadingMessage, setLoadingMessage] = useState("Getting your location...");
const [search, setSearch] = useState("");
const [searchResult, setSearchResult] = useState([]);
const [loadingCardList, setLoadingCardList] = useState({ [""]: false });
const [isOpen, setIsOpen] = useState(false);
const [reportId, setReportId] = useState("");
useEffect(() => {
checkClientLocation()
}, [])
useEffect(() => {
let isCancelled = false;
try {
if (!isCancelled) {
Tracker.autorun(function () {
if (!isCancelled) {
if (search == "") {
}
else {
var searchArray = search.split(/(\s+)/).filter( e => e.trim().length > 0)
let allResults = []
searchArray.forEach((word)=>{
allResults.push(LocationsIndex.search(word).fetch())
})
var flatten = _.flatten(allResults)
var removeDup = _.unique(flatten, false, function(item, k, v){
return item._id;
});
console.log(removeDup)
setSearchResult(removeDup)
}
}
})
}
} catch (e) {
if (!isCancelled) {
throw e;
}
}
return function cleanup() {
isCancelled = true;
}
}, [search])
function distance(lat1, lon1, lat2, lon2, unit) {
if ((lat1 == lat2) && (lon1 == lon2)) {
return 0;
}
else {
var radlat1 = Math.PI * lat1 / 180;
var radlat2 = Math.PI * lat2 / 180;
var theta = lon1 - lon2;
var radtheta = Math.PI * theta / 180;
var dist = Math.sin(radlat1) * Math.sin(radlat2) + Math.cos(radlat1) * Math.cos(radlat2) * Math.cos(radtheta);
if (dist > 1) {
dist = 1;
}
dist = Math.acos(dist);
dist = dist * 180 / Math.PI;
dist = dist * 60 * 1.1515;
if (unit == "K") { dist = dist * 1.609344 }
if (unit == "N") { dist = dist * 0.8684 }
return dist;
}
}
function checkClientLocation() {
if (clientLocation.location != undefined) {
if ((new Date().getTime() - new Date(clientLocation.location.time).getTime()) / 1000 < 300) {
if (nearestShops.length == undefined || nearestShops.length <= 1) {
fetchNearestShops()
} else {
// console.log(nearestShops)
}
} else { getClientLocation() }
} else { getClientLocation() }
}
function getClientLocation() {
setLoading(true)
var options = {
enableHighAccuracy: true,
timeout: 30000,
maximumAge: 300000
};
function success(position) {
console.log("CLT longitude: ")
console.log(position.coords.longitude)
console.log("CLT latitude: ")
console.log(position.coords.latitude)
setclientLocation('location', { longitude: position.coords.longitude, latitude: position.coords.latitude, time: new Date() });
fetchNearestShops(position.coords.latitude, position.coords.longitude);
}
function error(err) {
setLoading(false)
console.log("nm location failure")
toast("Can't get current location, please try a different browser if this continues")
console.warn(`ERROR(${err.code}): ${err.message}`);
}
navigator.geolocation.getCurrentPosition(success, error, options);
}
function fetchNearestShops(latitude, longitude) {
console.log("CLT updating nearest stores")
var lat;
var long;
if (clientLocation.location == undefined) {
lat = latitude;
long = longitude;
} else {
lat = clientLocation.location.latitude;
long = clientLocation.location.longitude;
}
Meteor.call('locations.findnearby', { lat, long }, (err, result) => {
if (result) {
setLoading(false)
setnearestShops(result)
} else {
console.log(err)
}
}
);
setLoadingMessage("Loading nearby stores...")
}
function renderList() {
if (loading) {
return (<Card>
<ProgressBar indeterminate />
{loadingMessage}
</Card>)
}
if (search == "") {
return nearestShops.map((location) => {
return renderCard(location)
}
)
}
else {
return searchResult.map((location) => {
return renderCard(location)
})
}
}
function Line(people) {
if(people) {
if(people === 1) {
return "There was 1 person in line"
} else {
return `There were ${getDisplayedLineLength(people)} people in line`
}
} else {
return "There was no line"
}
}
function renderCard(location) {
var Indicator = "green"
switch (true) {
case (location.line == undefined):
Indicator = "green"
break
case (location.line <= 20 && location.line >= 0):
Indicator = "green"
break
case (location.line <= 35 && location.line > 20):
Indicator = "orange"
break
case (location.line > 35):
Indicator = "red"
break
}
var updateNumber = location.line;
return (
<Card key={location._id} style={{ backgroundColor: "white" }}>
<ListItem style={{ fontSize: 20, fontWeight: "bold" }} modifier="nodivider">
{location.name}
<div className="right">
<Button onClick={() => {
// history.push('/duplicated?id=' + location._id)
setIsOpen(true)
setReportId(location._id)
}}>
<i className="fas fa-exclamation-triangle" />
</Button>
</div>
</ListItem>
<ListItem modifier="nodivider" expandable>
<div className="left">
<Icon style={{ paddingRight: 20 }} icon="map-marker-alt" /> {location.address}
</div>
<div className="expandable-content">
<img style={{ maxHeight: 200 }} src={"https://howlongistheline.org/maps/" + location.coordinates[1] + "," + location.coordinates[0] + ",K3340"} />
</div>
</ListItem>
<ListItem modifier="nodivider">
<div className="center" style={{ color: Indicator }}>
{Line(location.line)} {moment(location.lastUpdate).fromNow()}.
</div>
<div className="right">
<Button onClick={() => { history.push('/stocks?id=' + location._id) }}>
Stock Status
</Button>
</div>
</ListItem>
<ListItem modifier="nodivider">
<div className="center">
If you are at this store right now, drag the slider to update the line numbers, or confirm the existing numbers.
</div>
</ListItem>
<ListItem modifier="nodivider">
<div className="center">
<Slider
defaultValue={parseInt(location.line) ? parseInt(location.line) : 0}
min={0}
max={MAX_LINE_LENGTH}
style={{ width: "80%", margin: "0px 15px" }}
valueLabelDisplay="auto"
valueLabelFormat={getDisplayedLineLength}
onChangeCommitted={function (event, value) {
if (event.type === "mouseup" || event.type === "touchend") {
window.document.activeElement.value = value;
let buttonText = '';
if (location.line === value || (value === 0 && !location.line)) {
buttonText = `Confirm ${getDisplayedLineLength(location.line)} ${location.line === 1 ? "person is" : "people are"} waiting in line`;
} else {
buttonText = `Update line length to ${getDisplayedLineLength(value)} ${value === 1 ? "person" : "people"}`;
}
document.getElementById(location._id).innerHTML = buttonText;
updateNumber = value;
}
}}
/>
</div>
<div className="right">
</div>
</ListItem>
<ListItem modifier="nodivider" style={{ flexWrap: 'wrap' }}>
<div className="center">
<Button id={location._id} onClick={
function (event) {
setLoadingCardList({
...loadingCardList, //take existing key-value pairs and use them in our new state,
[location._id]: true //define new key-value pair with new uuid and [].
})
var loc = Locations.findOne({
_id: location._id
})
var options = {
enableHighAccuracy: true,
timeout: 10000,
maximumAge: 300000
};
navigator.geolocation.getCurrentPosition((position) => {
//client side distance check
var distanceInMeter = distance(position.coords.latitude, position.coords.longitude, loc.coordinates[1], loc.coordinates[0], "K") * 1000
if (distanceInMeter > 100) {
history.push("/editLine?id=" + location._id + "&lineSize=" + updateNumber, { location: location })
return
}
Meteor.call('locations.updatelinesize', location._id, updateNumber, function (err, result) {
if (err) {
toast("Some error happened, Please try again later!")
console.log(err)
setLoadingCardList({
...loadingCardList, //take existing key-value pairs and use them in our new state,
[location._id]: false //define new key-value pair with new uuid and [].
})
// history.push("/editLine?id=" + location._id + "&lineSize=" + updateNumber, { location: location })
return
}
// setLoading(false)
alert("The store has been updated, thank you!")
history.go(0)
});
}, (err) => {
console.log(err)
toast("Some error happened, Please try again later!")
setLoadingCardList({
...loadingCardList, //take existing key-value pairs and use them in our new state,
[location._id]: false //define new key-value pair with new uuid and [].
})
}, options)
}
}>
Confirm {getDisplayedLineLength(location.line)} {location.line === 1 ? "person is" : "people are"} waiting in line
</Button>
</div>
<div className="right">
<FacebookShareButton
url={"https://howlongistheline.org"}
quote={"There " + (location.line === 1 ? "was " : "were ") + getDisplayedLineLength(location.line) + " people waiting in line at " + location.name.trim() + " (" + location.address.trim() + ") " + moment(location.lastUpdate).fromNow()}
hashtag="#howlongistheline"
>
<FacebookIcon size={32} round />
</FacebookShareButton>
<TwitterShareButton
url={"https://howlongistheline.org"}
title={"There " + (location.line === 1 ? "was " : "were ") + getDisplayedLineLength(location.line) + " people waiting in line at " + location.name.trim() + " (" + location.address.trim() + ") " + moment(location.lastUpdate).fromNow()}
>
<TwitterIcon size={32} round />
</TwitterShareButton>
</div>
</ListItem>
{loadingCardList[location._id] ? <> <ProgressBar indeterminate /> Updating</> : <></>}
</Card>
)
}
return (
<MainLayout>
<div className="search-container" style={{ position: "sticky", top: 0, zIndex: 1000, background: "#fff" }}>
<ListItem>
<SearchInput style={{ width: "100%", backgroundColor: "#d9f4ff", color: "black" }} placeholder="Find stores near you." onChange={(e) => {
setSearch(e.target.value)
}} />
</ListItem>
</div>
<div className="border-top" style={{ marginBottom: 55 }}>
<Card class="isa_info">
<i className="fas fa-info-circle" /> If something doesn't work properly, check back a few days later and it will probably be fixed.
Go <a href="https://github.com/howlongistheline/howlongistheline.org/issues">here</a> to see what the community behind this is currently working on.
</Card>
<ListTitle>
Stores Near You
</ListTitle>
{renderList()}
</div>
<Button modifier="large--cta" style={{ position: "fixed", bottom: 0, zIndex: 1000, minHeight: 50 }}
// type="submit"
onClick={() => { history.push('/addLine') }}>
Missing store? Add it now!
<Icon style={{ marginLeft: 10 }} icon='fa-plus' />
</Button>
<ActionSheet isCancelable isOpen={isOpen}
onCancel={()=>{setIsOpen(false)}}
>
<ActionSheetButton onClick={()=>{history.push('/duplicated?id=' + reportId)}}> Report Duplicated</ActionSheetButton>
<ActionSheetButton onClick={()=>{history.push('/editLocation?id=' + reportId)}}> Report Wrong Location</ActionSheetButton>
<ActionSheetButton onClick={()=>{setIsOpen(false)}}>Cancel</ActionSheetButton>
</ActionSheet>
</MainLayout>
)
}
Example #22
| Source File: [slug].js From paras-landing with GNU General Public License v3.0 | 4 votes |
|
PublicationDetailPage = ({ errorCode, pubDetail, userProfile }) => {
const store = useStore()
const router = useRouter()
const toast = useToast()
const textAreaRef = useRef(null)
const [content, setContent] = useState(
pubDetail?.content ? EditorState.createWithContent(convertFromRaw(pubDetail.content)) : null
)
const [showModal, setShowModal] = useState('')
const [isCopied, setIsCopied] = useState(false)
const [isDeleting, setIsDeleting] = useState(false)
const [isComponentMounted, setIsComponentMounted] = useState(false)
useEffect(() => {
setIsComponentMounted(true)
}, [])
useEffect(() => {
if (errorCode) {
router.push('/publication')
}
}, [errorCode])
if (errorCode) {
return <Error />
}
const headMeta = {
title: `${pubDetail.title} — Paras Publication`,
description: pubDetail.description,
image: parseImgUrl(pubDetail.thumbnail),
}
const _copyLink = () => {
textAreaRef.current.select()
document.execCommand('copy')
setIsCopied(true)
setTimeout(() => {
setShowModal(false)
setIsCopied(false)
}, 1500)
}
const _deletePublication = async () => {
setIsDeleting(true)
try {
await axios.delete(`${process.env.V2_API_URL}/publications/${pubDetail._id}`, {
headers: {
authorization: await WalletHelper.authToken(),
},
})
setTimeout(() => {
router.push('/publication')
}, 1000)
} catch (err) {
sentryCaptureException(err)
const msg = err.response?.data?.message || 'Something went wrong, try again later.'
toast.show({
text: <div className="font-semibold text-center text-sm">{msg}</div>,
type: 'error',
duration: 2500,
})
setIsDeleting(false)
}
}
return (
<div>
<div className="min-h-screen bg-black">
<div
className="fixed inset-0 opacity-75"
style={{
zIndex: 0,
backgroundImage: `url('/bg.jpg')`,
backgroundRepeat: 'no-repeat',
backgroundSize: 'cover',
}}
></div>
<Head>
<title>{headMeta.title}</title>
<meta name="description" content={headMeta.description} />
<meta name="twitter:title" content={headMeta.title} />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@ParasHQ" />
<meta name="twitter:url" content="https://paras.id" />
<meta name="twitter:description" content={headMeta.description} />
<meta name="twitter:image" content={headMeta.image} />
<meta property="og:type" content="website" />
<meta property="og:title" content={headMeta.title} />
<meta property="og:site_name" content={headMeta.title} />
<meta property="og:description" content={headMeta.description} />
<meta property="og:url" content="https://paras.id" />
<meta property="og:image" content={headMeta.image} />
</Head>
<Nav />
{isComponentMounted && (
<div
className="absolute z-0 opacity-0"
style={{
top: `-1000`,
}}
>
<input ref={textAreaRef} readOnly type="text" value={window.location.href} />
</div>
)}
{showModal === 'options' && (
<Modal close={() => setShowModal('')}>
<div className="max-w-sm w-full px-4 py-2 bg-gray-100 m-auto rounded-md">
<div className="py-2 cursor-pointer" onClick={() => _copyLink()}>
{isCopied ? `Copied` : `Copy Link`}
</div>
<div
className="py-2 cursor-pointer"
onClick={() => {
setShowModal('shareTo')
}}
>
Share to...
</div>
{store.currentUser === pubDetail.author_id && (
<Link href={`/publication/edit/${pubDetail._id}`}>
<div
className="py-2 cursor-pointer"
onClick={() => setShowModal('confirmTransfer')}
>
Update publication
</div>
</Link>
)}
{store.currentUser === pubDetail.author_id && (
<div className="py-2 cursor-pointer" onClick={() => setShowModal('confirmDelete')}>
Delete
</div>
)}
</div>
</Modal>
)}
{showModal === 'confirmDelete' && (
<Modal close={() => setShowModal('')} closeOnBgClick={true} closeOnEscape={true}>
<div className="max-w-sm w-full p-4 bg-gray-100 m-auto rounded-md">
<h1 className="text-2xl font-bold text-gray-900 tracking-tight">Confirm Delete</h1>
<p className="text-gray-900 mt-2">
You are about to delete <b>{pubDetail.title}</b>
</p>
<button
className="w-full outline-none h-12 mt-4 rounded-md bg-transparent text-sm font-semibold border-2 px-4 py-2 border-primary bg-primary text-gray-100"
type="submit"
disabled={isDeleting}
onClick={_deletePublication}
>
{isDeleting ? 'Deleting...' : 'Delete my publication'}
</button>
</div>
</Modal>
)}
{showModal === 'shareTo' && (
<Modal close={() => setShowModal('')}>
<div className="max-w-sm w-full px-4 py-2 bg-gray-100 m-auto rounded-md">
<div className="py-2 cursor-pointer">
<TwitterShareButton
title={`Read ${pubDetail.title} only at @ParasHQ\n\n#paras #cryptoart #digitalart #tradingcards`}
url={window.location.href}
className="flex items-center w-full"
>
<TwitterIcon
size={24}
className="rounded-md"
bgStyle={{
fill: '#11111F',
}}
/>
<p className="pl-2">Twitter</p>
</TwitterShareButton>
</div>
<div className="py-2 cursor-pointer">
<FacebookShareButton
url={window.location.href}
className="flex items-center w-full"
>
<FacebookIcon
size={24}
className="rounded-md"
bgStyle={{
fill: '#11111F',
}}
/>
<p className="pl-2">Facebook</p>
</FacebookShareButton>
</div>
</div>
</Modal>
)}
<div className="max-w-5xl relative m-auto pb-12 pt-4">
<p className="mb-8 px-4 max-w-3xl m-auto text-gray-400">
<Link href={`/publication`}>
<span className="cursor-pointer">Publication</span>
</Link>
{' > '}
<Link href={`/publication?type=${pubDetail.type}`}>
<span className="cursor-pointer capitalize">{pubDetail.type}</span>
</Link>
{' > '}
<span className="font-semibold text-white">{pubDetail.title}</span>
</p>
<h1 className="titlePublication text-4xl font-bold pb-0 text-center px-4 md:px-0">
{pubDetail.title}
</h1>
<div className="m-auto max-w-3xl px-4 pt-8">
<div className="flex justify-between">
<div className="flex space-x-4">
<Link href={`/${pubDetail.author_id}`}>
<div className="w-16 h-16 rounded-full overflow-hidden bg-primary cursor-pointer">
<img
src={parseImgUrl(userProfile?.imgUrl, null, {
width: `800`,
})}
className="object-cover"
/>
</div>
</Link>
<div className="m-auto">
<LinkToProfile
accountId={pubDetail.author_id}
className="text-white font-bold hover:border-white text-xl"
/>
<p className="text-white m-auto text-sm">{parseDate(pubDetail.updated_at)}</p>
</div>
</div>
<div>
<IconDots
color="#ffffff"
className="cursor-pointer mb-1"
onClick={() => setShowModal('options')}
/>
</div>
</div>
{content && (
<TextEditor
title={createEditorStateWithText(pubDetail.title)}
hideTitle={true}
content={content}
setContent={setContent}
readOnly={true}
/>
)}
</div>
{pubDetail.contract_token_ids && pubDetail.contract_token_ids.length !== 0 && (
<div className="max-w-4xl mx-auto px-4 pt-16">
<div className=" border-2 border-dashed border-gray-800 rounded-md p-4 md:p-8">
<h4 className="text-white font-semibold text-3xl md:mb-4 text-center">
Digital Collectibles
</h4>
<div
className={`flex flex-wrap ${
pubDetail.contract_token_ids.length <= 3 && 'justify-center'
}`}
>
{pubDetail.contract_token_ids?.map((tokenId, index) => (
<div key={index} className="w-full md:w-1/2 lg:w-1/3 flex-shrink-0 p-8">
<EmbeddedCard tokenId={tokenId} />
</div>
))}
</div>
</div>
</div>
)}
</div>
<Footer />
</div>
</div>
)
}
Example #23
| Source File: ShareButton.js From warsinhk with MIT License | 4 votes |
|
function ShareButton(props) {
const [anchorEl, setAnchorEl] = React.useState(null)
const { site } = useStaticQuery(
graphql`
query {
site {
siteMetadata {
siteUrl
}
}
}
`
)
function getPageUrl() {
let url = `${site.siteMetadata.siteUrl}${fullPath}`
if (props.caseId) {
url = `${site.siteMetadata.siteUrl}${fullPath}/${props.caseId}`
}
if (!isSSR()) {
url = url + decodeURIComponent(window.location.hash)
}
return url
}
function handleShareButtonClick(event) {
if (!isSSR() && isWebShareAPISupported()) {
const data = getWebShareData(getPageUrl())
if (navigator.canShare(data)) {
navigator.share(data).then(() => {
trackCustomEvent({
category: "general",
action: "click",
label: "share",
})
})
return
}
}
setAnchorEl(event.currentTarget)
}
function handleShareButtonClose(media) {
setAnchorEl(null)
if (typeof media === "string") {
trackCustomEvent({
category: "general",
action: "click",
label: `share_${media}`,
})
}
}
const { pathname: fullPath } = useLocation()
const url = getPageUrl()
return (
<>
<StyledIconButton
color="inherit"
aria-label="Share"
aria-controls="share-menu"
aria-haspopup="true"
onClick={handleShareButtonClick}
>
<ShareIcon />
</StyledIconButton>
<Menu
id="share-menu"
anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)}
onClose={handleShareButtonClose}
>
<MenuItem onClick={() => handleShareButtonClose("facebook")}>
<FacebookShareButton
url={getShareUrl(url, "facebook")}
children={<FacebookIcon size={32} round={true} />}
/>
</MenuItem>
<MenuItem onClick={() => handleShareButtonClose("telegram")}>
<TelegramShareButton
url={getShareUrl(url, "telegram")}
children={<TelegramIcon size={32} round={true} />}
/>
</MenuItem>
<MenuItem onClick={() => handleShareButtonClose("whatsapp")}>
<WhatsappShareButton
url={getShareUrl(url, "whatsapp")}
children={<WhatsappIcon size={32} round={true} />}
/>
</MenuItem>
<MenuItem onClick={() => handleShareButtonClose("twitter")}>
<TwitterShareButton
url={getShareUrl(url, "twitter")}
children={<TwitterIcon size={32} round={true} />}
/>
</MenuItem>
<MenuItem onClick={() => handleShareButtonClose("link")}>
<StyledCopyIcon
onClick={() => {
navigator.clipboard.writeText(url)
}}
/>
</MenuItem>
</Menu>
</>
)
}
Example #24
| Source File: Share.js From gez with MIT License | 4 votes |
|
export default function Share({ lang, url, title }) {
const [share, setShare] = useState(false);
const [copy, setCopy] = useState(false);
return (
<div
className='relative inline-block text-left'
onMouseOver={() => setShare(true)}
onMouseLeave={() => setShare(false)}
>
<div>
<span className='rounded-md shadow-sm'>
<button
type='button'
className='text-xl font-medium bg-green-700 text-white p-2 rounded inline-flex items-center focus:outline-none transition ease-in-out duration-150'
id='share-menu'
>
<svg
fill='none'
stroke='currentColor'
strokeLinecap='round'
strokeLinejoin='round'
strokeWidth='2'
viewBox='0 0 24 24'
className='w-6 h-6'
>
<path d='M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z' />
</svg>
{lang.share}
</button>
</span>
</div>
<div
className={`${
!share ? 'hidden' : 'block'
} origin-top-right absolute right-0 w-56 rounded-md shadow-lg text-center`}
>
<div
className='rounded-md bg-white shadow-xs'
role='menu'
aria-orientation='vertical'
aria-labelledby='share-menu'
>
<div className='py-1'>
<div
className='block px-2 py-1 text-sm leading-5 text-gray-700'
role='menuitem'
>
<FacebookShareButton url={url} quote={title}>
<div className='text-xl border-solid border-gray-300 rounded-md hover:bg-gray-300 p-2 inline-flex'>
<svg
fill='none'
stroke='currentColor'
strokeLinecap='round'
strokeLinejoin='round'
strokeWidth='2'
viewBox='0 0 24 24'
className='w-6 h-6'
>
<path d='M23.9981 11.9991C23.9981 5.37216 18.626 0 11.9991 0C5.37216 0 0 5.37216 0 11.9991C0 17.9882 4.38789 22.9522 10.1242 23.8524V15.4676H7.07758V11.9991H10.1242V9.35553C10.1242 6.34826 11.9156 4.68714 14.6564 4.68714C15.9692 4.68714 17.3424 4.92149 17.3424 4.92149V7.87439H15.8294C14.3388 7.87439 13.8739 8.79933 13.8739 9.74824V11.9991H17.2018L16.6698 15.4676H13.8739V23.8524C19.6103 22.9522 23.9981 17.9882 23.9981 11.9991Z' />
</svg>
<span>Facebook</span>
</div>
</FacebookShareButton>
</div>
<div
className='block px-2 py-1 text-sm leading-5 text-gray-700'
role='menuitem'
>
<TwitterShareButton url={url} title={title}>
<div className='text-xl border-solid border-gray-300 rounded-md hover:bg-gray-300 p-2 inline-flex'>
<svg
fill='none'
stroke='currentColor'
strokeLinecap='round'
strokeLinejoin='round'
strokeWidth='2'
viewBox='0 0 24 24'
className='w-6 h-6'
>
<path d='M23.954 4.569c-.885.389-1.83.654-2.825.775 1.014-.611 1.794-1.574 2.163-2.723-.951.555-2.005.959-3.127 1.184-.896-.959-2.173-1.559-3.591-1.559-2.717 0-4.92 2.203-4.92 4.917 0 .39.045.765.127 1.124C7.691 8.094 4.066 6.13 1.64 3.161c-.427.722-.666 1.561-.666 2.475 0 1.71.87 3.213 2.188 4.096-.807-.026-1.566-.248-2.228-.616v.061c0 2.385 1.693 4.374 3.946 4.827-.413.111-.849.171-1.296.171-.314 0-.615-.03-.916-.086.631 1.953 2.445 3.377 4.604 3.417-1.68 1.319-3.809 2.105-6.102 2.105-.39 0-.779-.023-1.17-.067 2.189 1.394 4.768 2.209 7.557 2.209 9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63.961-.689 1.8-1.56 2.46-2.548l-.047-.02z' />
</svg>
<span>Twitter</span>
</div>
</TwitterShareButton>
</div>
</div>
<div
className='block px-2 py-1 text-sm leading-5 text-gray-700'
role='menuitem'
>
<LinkedinShareButton url={url} title={title}>
<div className='text-xl border-solid border-gray-300 rounded-md hover:bg-gray-300 p-2 inline-flex'>
<svg
fill='none'
stroke='currentColor'
strokeLinecap='round'
strokeLinejoin='round'
strokeWidth='2'
viewBox='0 0 24 24'
className='w-6 h-6'
>
<path d='M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z' />
</svg>
<span>LinkedIn</span>
</div>
</LinkedinShareButton>
</div>
<div
className='block px-2 py-1 text-sm leading-5 text-gray-700'
role='menuitem'
>
<WhatsappShareButton url={url} title={title}>
<div className='text-xl border-solid border-gray-300 rounded-md hover:bg-gray-300 p-2 inline-flex'>
<svg
fill='none'
stroke='currentColor'
strokeLinecap='round'
strokeLinejoin='round'
strokeWidth='2'
viewBox='0 0 24 24'
className='w-6 h-6'
>
<path d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z' />
</svg>
<span>WhatsApp</span>
</div>
</WhatsappShareButton>
</div>
<div className='border-t border-gray-100'></div>
<div
className='block px-2 py-1 text-sm leading-5 text-gray-700'
role='menuitem'
>
<EmailShareButton url={url} subject={title}>
<div className='text-xl border-solid border-gray-300 rounded-md hover:bg-gray-300 p-2 inline-flex'>
<svg
fill='none'
stroke='currentColor'
strokeLinecap='round'
strokeLinejoin='round'
strokeWidth='2'
viewBox='0 0 24 24'
className='w-6 h-6'
>
<path d='M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z' />
</svg>
<span>{lang.email}</span>
</div>
</EmailShareButton>
</div>
<div className='border-t border-gray-300'></div>
<div className='py-1'>
<div
className='block px-2 py-1 text-sm leading-5 text-gray-700'
role='menuitem'
>
<button
className='text-xl border-solid border-gray-300 rounded-md hover:bg-gray-300 p-2 inline-flex'
onClick={() =>
copyUrl(url) ||
setCopy(true) ||
setTimeout(() => {
setCopy(false);
}, 3000)
}
>
<svg
fill='none'
stroke='currentColor'
strokeLinecap='round'
strokeLinejoin='round'
strokeWidth='2'
viewBox='0 0 24 24'
className='w-6 h-6'
>
<path d='M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3' />
</svg>
<span>{lang.copyLink}</span>
</button>
{copy && <div>{lang.copyLinkSuccess}</div>}
</div>
</div>
</div>
</div>
</div>
);
}
Example #25
| Source File: index.js From paras-landing with GNU General Public License v3.0 | 4 votes |
|
PublicationDetailPage = ({ errorCode, pubDetail, userProfile }) => {
const store = useStore()
const router = useRouter()
const toast = useToast()
const textAreaRef = useRef(null)
const [content, setContent] = useState(
pubDetail?.content ? EditorState.createWithContent(convertFromRaw(pubDetail.content)) : null
)
const [showModal, setShowModal] = useState('')
const [isCopied, setIsCopied] = useState(false)
const [isDeleting, setIsDeleting] = useState(false)
const [isComponentMounted, setIsComponentMounted] = useState(false)
useEffect(() => {
setIsComponentMounted(true)
}, [])
useEffect(() => {
if (errorCode) {
router.push('/publication')
}
}, [errorCode])
if (errorCode) {
return <Error />
}
const headMeta = {
title: `${pubDetail.title} — Paras Publication`,
description: pubDetail.description,
image: parseImgUrl(pubDetail.thumbnail),
}
const _copyLink = () => {
textAreaRef.current.select()
document.execCommand('copy')
setIsCopied(true)
setTimeout(() => {
setShowModal(false)
setIsCopied(false)
}, 1500)
}
const _deletePublication = async () => {
setIsDeleting(true)
try {
await axios.delete(`${process.env.V2_API_URL}/publications/${pubDetail._id}`, {
headers: {
authorization: await WalletHelper.authToken(),
},
})
setTimeout(() => {
router.push('/publication')
}, 1000)
} catch (err) {
sentryCaptureException(err)
const msg = err.response?.data?.message || `Something went wrong, try again later`
toast.show({
text: <div className="font-semibold text-center text-sm">{msg}</div>,
type: 'error',
duration: 2500,
})
setIsDeleting(false)
}
}
return (
<div>
<div className="min-h-screen bg-black">
<div
className="fixed inset-0 opacity-75"
style={{
zIndex: 0,
backgroundImage: `url('/bg.jpg')`,
backgroundRepeat: 'no-repeat',
backgroundSize: 'cover',
}}
></div>
<Head>
<title>{headMeta.title}</title>
<meta name="description" content={headMeta.description} />
<meta name="twitter:title" content={headMeta.title} />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@ParasHQ" />
<meta name="twitter:url" content="https://paras.id" />
<meta name="twitter:description" content={headMeta.description} />
<meta name="twitter:image" content={headMeta.image} />
<meta property="og:type" content="website" />
<meta property="og:title" content={headMeta.title} />
<meta property="og:site_name" content={headMeta.title} />
<meta property="og:description" content={headMeta.description} />
<meta property="og:url" content="https://paras.id" />
<meta property="og:image" content={headMeta.image} />
</Head>
<Nav />
{isComponentMounted && (
<div
className="absolute z-0 opacity-0"
style={{
top: `-1000`,
}}
>
<input ref={textAreaRef} readOnly type="text" value={window.location.href} />
</div>
)}
{showModal === 'options' && (
<Modal close={() => setShowModal('')}>
<div className="max-w-sm w-full px-4 py-2 bg-gray-100 m-auto rounded-md">
<div className="py-2 cursor-pointer" onClick={() => _copyLink()}>
{isCopied ? `Copied` : `Copy Link`}
</div>
<div
className="py-2 cursor-pointer"
onClick={() => {
setShowModal('shareTo')
}}
>
Share to...
</div>
{!pubDetail.isComic && store.currentUser === pubDetail.author_id && (
<>
<Link href={`/publication/edit/${pubDetail._id}`}>
<div
className="py-2 cursor-pointer"
onClick={() => setShowModal('confirmTransfer')}
>
Update publication
</div>
</Link>
<div
className="py-2 cursor-pointer"
onClick={() => setShowModal('confirmDelete')}
>
Delete
</div>
</>
)}
</div>
</Modal>
)}
{showModal === 'confirmDelete' && (
<Modal close={() => setShowModal('')} closeOnBgClick={true} closeOnEscape={true}>
<div className="max-w-sm w-full p-4 bg-gray-100 m-auto rounded-md">
<h1 className="text-2xl font-bold text-gray-900 tracking-tight">Confirm Delete</h1>
<p className="text-gray-900 mt-2">
You are about to delete <b>{pubDetail.title}</b>
</p>
<button
className="w-full outline-none h-12 mt-4 rounded-md bg-transparent text-sm font-semibold border-2 px-4 py-2 border-primary bg-primary text-gray-100"
type="submit"
disabled={isDeleting}
onClick={_deletePublication}
>
{isDeleting ? 'Deleting...' : 'Delete my publication'}
</button>
</div>
</Modal>
)}
{showModal === 'shareTo' && (
<Modal close={() => setShowModal('')}>
<div className="max-w-sm w-full px-4 py-2 bg-gray-100 m-auto rounded-md">
<div className="py-2 cursor-pointer">
<TwitterShareButton
title={`Read ${pubDetail.title} only at @ParasHQ\n\n#paras #cryptoart #digitalart #tradingcards`}
url={window.location.href}
className="flex items-center w-full"
>
<TwitterIcon
size={24}
className="rounded-md"
bgStyle={{
fill: '#11111F',
}}
/>
<p className="pl-2">Twitter</p>
</TwitterShareButton>
</div>
<div className="py-2 cursor-pointer">
<FacebookShareButton
url={window.location.href}
className="flex items-center w-full"
>
<FacebookIcon
size={24}
className="rounded-md"
bgStyle={{
fill: '#11111F',
}}
/>
<p className="pl-2">Facebook</p>
</FacebookShareButton>
</div>
</div>
</Modal>
)}
<div className="max-w-5xl relative m-auto pb-12 pt-4">
<p className="mb-8 px-4 max-w-3xl m-auto text-gray-400">
<Link href={`/publication`}>
<span className="cursor-pointer">Publication</span>
</Link>
{' > '}
<Link href={`/publication?type=${pubDetail.type}`}>
<span className="cursor-pointer capitalize">{pubDetail.type}</span>
</Link>
{' > '}
<span className="font-semibold text-white">{pubDetail.title}</span>
</p>
<h1 className="titlePublication text-4xl font-bold pb-0 text-center px-4 md:px-0">
{pubDetail.title}
</h1>
<div className="m-auto max-w-3xl px-4 pt-8">
<div className="flex justify-between">
<div className="flex space-x-4">
<Link href={`/${pubDetail.author_id}`}>
<div className="w-16 h-16 rounded-full overflow-hidden bg-primary cursor-pointer">
<img
src={parseImgUrl(userProfile?.imgUrl, null, {
width: `800`,
})}
className="object-cover"
/>
</div>
</Link>
<div className="m-auto">
<LinkToProfile
accountId={pubDetail.author_id}
className="text-white font-bold hover:border-white text-xl"
/>
<p className="text-white m-auto text-sm">{parseDate(pubDetail.updated_at)}</p>
</div>
</div>
<div>
<IconDots
color="#ffffff"
className="cursor-pointer mb-1"
onClick={() => setShowModal('options')}
/>
</div>
</div>
{content && (
<TextEditor
title={createEditorStateWithText(pubDetail.title)}
hideTitle={true}
content={content}
setContent={setContent}
readOnly={true}
/>
)}
</div>
{pubDetail.collection_ids && pubDetail.collection_ids.length !== 0 && (
<div className="max-w-4xl mx-auto px-4 pt-16">
<div className="rounded-md p-2 md:p-4">
<h4 className="text-white font-semibold text-3xl md:mb-4 text-center">
{pubDetail.isComic ? 'Comics' : 'Collections'}
</h4>
<div
className={`flex flex-wrap ${
pubDetail.contract_token_ids.length <= 3 && 'justify-center'
}`}
>
{pubDetail.collection_ids?.map((collectionId, index) => (
<div key={index} className="w-full md:w-1/2 lg:w-1/3 flex-shrink-0 p-4">
<EmbeddedCollection collectionId={collectionId} pubDetail={pubDetail} />
</div>
))}
</div>
</div>
</div>
)}
{pubDetail.contract_token_ids && pubDetail.contract_token_ids.length !== 0 && (
<div className="max-w-4xl mx-auto px-4 pt-16">
<div className=" border-2 border-dashed border-gray-800 rounded-md p-4 md:p-8">
<h4 className="text-white font-semibold text-3xl md:mb-4 text-center">
Digital Collectibles
</h4>
<div
className={`flex flex-wrap ${
pubDetail.contract_token_ids.length <= 3 && 'justify-center'
}`}
>
{pubDetail.contract_token_ids?.map((tokenId, index) => (
<div key={index} className="w-full md:w-1/2 lg:w-1/3 flex-shrink-0 p-8">
<EmbeddedCard tokenId={tokenId} />
</div>
))}
</div>
</div>
</div>
)}
</div>
<Footer />
</div>
</div>
)
}
Example #26
| Source File: index.js From proof-of-humanity-web with MIT License | 4 votes |
|
export default function SubmissionDetailsCard({
submission,
contract,
vouchers,
}) {
const {
requests: [request],
latestRequest: [latestRequest],
id,
name,
vouchees,
...rest
} = (submission = useFragment(
submissionDetailsCardFragments.submission,
submission
));
const orderedVouchees = lodashOrderBy(
vouchees,
(a) => a.requests[a.requests.length - 1].lastStatusChange,
"desc"
);
const [accounts] = useWeb3("eth", "getAccounts");
const isSelf =
accounts?.[0] && accounts[0].toLowerCase() === id.toLowerCase();
const { lastStatusChange } = request;
const {
submissionBaseDeposit,
submissionDuration,
requiredNumberOfVouches,
challengePeriodDuration,
} = (contract = useFragment(
submissionDetailsCardFragments.contract,
contract
));
const status = submissionStatusEnum.parse({ ...rest, submissionDuration });
const { challenges } = latestRequest || {};
const activeChallenges = challenges.filter(
({ disputeID }) => disputeID !== null
);
// Note that there is a challenge object with first round data even if there
// is no challenge.
const challenge = (challenges && challenges[0]) || {};
const { rounds, lastRoundID } = challenge || {};
const round = (rounds && rounds[0]) || {};
const { hasPaid } = round || {};
const evidence = useEvidenceFile()(request.evidence[0].URI);
const contributions = useMemo(
() =>
round.contributions.map((contribution) =>
partyEnum.parse(contribution.values)
),
[round.contributions]
);
const compoundName =
[evidence?.file?.firstName, evidence?.file?.lastName]
.filter(Boolean)
.join(" ") || name;
const displayName =
compoundName === name ? name : `${compoundName} (${name})`;
const [arbitrationCost] = useContract(
"klerosLiquid",
"arbitrationCost",
useMemo(
() => ({
address: request.arbitrator,
args: [request.arbitratorExtraData],
}),
[request]
)
);
const { web3 } = useWeb3();
const totalCost = useMemo(
() => arbitrationCost?.add(web3.utils.toBN(submissionBaseDeposit)),
[arbitrationCost, web3.utils, submissionBaseDeposit]
);
const totalContribution = useMemo(
() =>
contributions.reduce(
(acc, { Requester }) => acc.add(web3.utils.toBN(Requester)),
web3.utils.toBN(0)
),
[contributions, web3.utils]
);
const [offChainVouches, setOffChainVouches] = useState([]);
useEffect(() => {
if (!id) return;
(async () => {
const res = await (
await fetch(
`${process.env.NEXT_PUBLIC_VOUCH_DB_URL}/vouch/search?submissionId=${id}`
)
).json();
if (res && res.vouches && res.vouches.length > 0)
setOffChainVouches(res.vouches[0].vouchers);
})();
}, [id]);
const registeredGraphVouchers = useFragment(
submissionDetailsCardFragments.vouchers,
vouchers
).filter(
(voucher) =>
Date.now() / 1000 - voucher.submissionTime < submissionDuration &&
voucher.id !== id.toLowerCase()
);
const currentGraphVouchers = request.vouches.filter(
(voucher) =>
Date.now() / 1000 - voucher.submissionTime < submissionDuration &&
voucher.id !== id.toLowerCase()
);
const [registeredVouchers, currentVouchers] = useMemo(() => {
const completeSet = new Set();
const onlyCurrentSet = new Set();
offChainVouches.forEach((v) => {
if (v !== id.toLowerCase()) {
completeSet.add(v);
onlyCurrentSet.add(v);
}
});
registeredGraphVouchers.forEach((v) => completeSet.add(v.id));
currentGraphVouchers.forEach((v) => onlyCurrentSet.add(v.id));
return [[...completeSet], [...onlyCurrentSet]];
}, [offChainVouches, registeredGraphVouchers, currentGraphVouchers, id]);
const shareTitle =
status === submissionStatusEnum.Vouching
? "Register and vouch for this profile on Proof Of Humanity."
: "Check out this profile on Proof Of Humanity.";
const firstRoundFullyFunded = Number(lastRoundID) === 0 && hasPaid[0];
return (
<Card
mainSx={{
alignItems: "stretch",
flexDirection: ["column", null, null, "row"],
padding: 0,
}}
>
<Flex
sx={{
alignItems: "center",
backgroundColor: "muted",
flexDirection: "column",
maxWidth: [null, null, null, 300],
paddingX: 3,
paddingY: 4,
textAlign: "center",
}}
>
<Image
sx={{ objectFit: "contain" }}
variant="avatar"
src={evidence?.file?.photo}
/>
<Text
sx={{
fontSize: 2,
fontWeight: "bold",
marginY: 2,
overflowWrap: "anywhere",
}}
>
{evidence instanceof Error
? "We are doing some maintenance work and will be online again soon."
: evidence?.file?.name &&
(name.replaceAll(/[^\s\w]/g, "") ===
evidence.file.name.replaceAll(/[^\s\w]/g, "")
? evidence.file.name
: "We are doing some maintenance work and will be online again soon.")}
</Text>
<Text sx={{ wordBreak: "break-word" }} count={2}>
{evidence?.file ? evidence.file.bio || " " : null}
</Text>
<Box sx={{ marginY: 2, width: "100%" }}>
{status === submissionStatusEnum.Vouching && (
<>
{((totalCost?.gt(totalContribution) && Number(lastRoundID) > 0) ||
(Number(lastRoundID) === 0 && !hasPaid[0])) && (
<FundButton
totalCost={totalCost}
totalContribution={totalContribution}
contract="proofOfHumanity"
method="fundSubmission"
args={[id]}
>
Fund Submission
</FundButton>
)}
{!isSelf && <GaslessVouchButton submissionID={id} />}
{!isSelf && <VouchButton submissionID={id} />}
</>
)}
</Box>
<Flex sx={{ width: "100%" }}>
<Box
sx={{
flex: 1,
marginBottom: 3,
paddingX: 1,
}}
>
<Text>Vouchers</Text>
<Text sx={{ fontWeight: "bold", paddingX: 1 }}>
{String(currentVouchers.length)}/{requiredNumberOfVouches}
</Text>
</Box>
{status !== submissionStatusEnum.Registered && (
<Box
sx={{
flex: 1,
borderLeftColor: "text",
borderLeftStyle: "solid",
borderLeftWidth: 1,
}}
>
<Text>Deposit</Text>
<Text sx={{ fontWeight: "bold" }}>
{firstRoundFullyFunded
? "100%"
: totalCost
? `${(
totalContribution
.mul(web3.utils.toBN(10000)) // Basis points.
.div(totalCost)
.toNumber() / 100
).toFixed(2)}%`
: "0%"}
</Text>
</Box>
)}
</Flex>
{challenges?.length > 0 && challenge.disputeID !== null && (
<Flex
sx={{
alignItems: "center",
flexDirection: "column",
marginTop: 3,
}}
>
<Text sx={{ fontWeight: "bold" }}>
{`Dispute${activeChallenges?.length > 1 ? "s" : ""}:`}
</Text>
{activeChallenges.map(
({ disputeID, reason, duplicateSubmission }, i) => (
<Flex
key={i}
sx={{
flexDirection: "row",
}}
>
<Link
newTab
href={`https://resolve.kleros.io/cases/${disputeID}`}
sx={{ marginLeft: 1 }}
>
#{disputeID}{" "}
{challengeReasonEnum.parse(reason).startCase !== "None"
? challengeReasonEnum.parse(reason).startCase
: null}
{challengeReasonEnum.parse(reason).startCase === "Duplicate"
? " of-"
: null}
</Link>
{challengeReasonEnum.parse(reason).startCase ===
"Duplicate" ? (
<SmallAvatar submissionId={duplicateSubmission.id} />
) : null}
</Flex>
)
)}
</Flex>
)}
<Box sx={{ marginTop: "auto" }}>
<Deadlines
submission={submission}
contract={contract}
status={status}
/>
</Box>
</Flex>
<Box sx={{ flex: 1, padding: 4 }}>
<Flex
sx={{
alignItems: "center",
gap: 8,
marginBottom: "4px",
}}
>
<User />
<Text as="span" sx={{ fontWeight: "bold" }}>
{displayName}
</Text>
</Flex>
<EthereumAccount
diameter={16}
address={id}
sx={{
marginBottom: 2,
fontWeight: "bold",
}}
/>
<Video url={evidence?.file?.video} />
<UBICard
submissionID={id}
lastStatusChange={lastStatusChange}
challengePeriodDuration={challengePeriodDuration}
status={status}
registeredVouchers={registeredVouchers}
firstRoundFullyFunded={firstRoundFullyFunded}
/>
{status === submissionStatusEnum.Vouching && (
<Alert
type="muted"
title="Something wrong with this submission?"
sx={{ mt: 3, wordWrap: "break-word" }}
>
<Text>
There is still time to save this submitter's deposit! Send
them an email to{" "}
<Link href={`mailto:${id}@ethmail.cc`}>{id}@ethmail.cc</Link>. It
may save the submitter's deposit!
</Text>
</Alert>
)}
{registeredVouchers.length > 0 && (
<>
<Text
sx={{
marginTop: 2,
marginBottom: 1,
opacity: 0.45,
}}
>
Vouched by:
</Text>
<Flex sx={{ flexWrap: "wrap" }}>
{registeredVouchers.map((voucherId) => (
<SmallAvatar key={voucherId} submissionId={voucherId} />
))}
</Flex>
</>
)}
{vouchees.length > 0 && (
<>
<Text
sx={{
marginTop: 2,
marginBottom: 1,
opacity: 0.45,
}}
>
Vouched for:
</Text>
<Flex sx={{ flexWrap: "wrap" }}>
{orderedVouchees.map(({ id: address }) => (
<SmallAvatar key={address} submissionId={address} />
))}
</Flex>
</>
)}
<Flex sx={{ justifyContent: "flex-end" }}>
<RedditShareButton url={location.href} title={shareTitle}>
<RedditIcon size={32} />
</RedditShareButton>
<TelegramShareButton url={location.href} title={shareTitle}>
<TelegramIcon size={32} />
</TelegramShareButton>
<TwitterShareButton
url={location.href}
title={shareTitle}
via="Kleros_io"
hashtags={["kleros", "proofofhumanity"]}
>
<TwitterIcon size={32} />
</TwitterShareButton>
</Flex>
</Box>
</Card>
);
}
Example #27
| Source File: appeal.js From proof-of-humanity-web with MIT License | 4 votes |
|
function AppealTabPanel({
sharedStakeMultiplier,
winnerStakeMultiplier,
loserStakeMultiplier,
arbitrator,
challenge: {
challengeID,
disputeID,
parties: [party1, party2],
rounds: [{ paidFees, hasPaid }],
},
arbitratorExtraData,
contract,
args,
}) {
const { web3 } = useWeb3();
sharedStakeMultiplier = web3.utils.toBN(sharedStakeMultiplier);
winnerStakeMultiplier = web3.utils.toBN(winnerStakeMultiplier);
loserStakeMultiplier = web3.utils.toBN(loserStakeMultiplier);
const divisor = web3.utils.toBN(10000);
const hundred = web3.utils.toBN(100);
const undecided = {
label: "Previous round undecided.",
reward: sharedStakeMultiplier.mul(hundred).div(sharedStakeMultiplier),
};
const winner = {
label: "Previous round winner.",
reward: loserStakeMultiplier.mul(hundred).div(winnerStakeMultiplier),
};
const loser = {
label: "Previous round loser.",
reward: winnerStakeMultiplier.mul(hundred).div(loserStakeMultiplier),
};
const [appealCost] = useContract(
"klerosLiquid",
"appealCost",
useMemo(
() => ({ address: arbitrator, args: [disputeID, arbitratorExtraData] }),
[arbitrator, disputeID, arbitratorExtraData]
)
);
if (appealCost) {
undecided.cost = appealCost.add(
appealCost.mul(sharedStakeMultiplier).div(divisor)
);
winner.cost = appealCost.add(
appealCost.mul(winnerStakeMultiplier).div(divisor)
);
loser.cost = appealCost.add(
appealCost.mul(loserStakeMultiplier).div(divisor)
);
}
const [appealPeriod] = useContract(
"klerosLiquid",
"appealPeriod",
useMemo(
() => ({ address: arbitrator, args: [disputeID] }),
[arbitrator, disputeID]
)
);
if (appealPeriod) {
undecided.deadline = appealPeriod.end;
winner.deadline = appealPeriod.end;
loser.deadline = appealPeriod.start.add(
appealPeriod.end.sub(appealPeriod.start).div(web3.utils.toBN(2))
);
}
let [currentRuling] = useContract(
"klerosLiquid",
"currentRuling",
useMemo(
() => ({ address: arbitrator, args: [disputeID] }),
[arbitrator, disputeID]
)
);
currentRuling = currentRuling?.toNumber();
const shareTitle = `Crowdfunding Appeal Fees for ${party1} vs ${party2}.`;
return (
<>
<Text sx={{ marginBottom: 2 }}>
Help fund a side’s appeal fees to win part of the other side’s deposit
when your side ultimately wins. If only one side manages to fund their
fees, it automatically wins. (Rewards only apply to rounds where both
sides are fully funded.)
</Text>
<Grid sx={{ marginBottom: 3 }} gap={2} columns={[1, 1, 1, 2]}>
<AppealTabPanelCard
address={party1}
{...[undecided, winner, loser][currentRuling]}
paidFees={paidFees[1]}
hasPaid={hasPaid[0]}
oppositeHasPaid={hasPaid[1]}
loserDeadline={loser.deadline}
isWinner={currentRuling === 1}
contract={contract}
args={[...args, challengeID, 1]}
partyLabel="Submitter"
/>
<AppealTabPanelCard
address={party2}
{...[undecided, loser, winner][currentRuling]}
paidFees={paidFees[2]}
hasPaid={hasPaid[1]}
oppositeHasPaid={hasPaid[0]}
loserDeadline={loser.deadline}
isWinner={currentRuling === 2}
contract={contract}
args={[...args, challengeID, 2]}
partyLabel="Challenger"
/>
</Grid>
<Flex sx={{ justifyContent: "center" }}>
<RedditShareButton url={location.href} title={shareTitle}>
<RedditIcon size={32} />
</RedditShareButton>
<TelegramShareButton url={location.href} title={shareTitle}>
<TelegramIcon size={32} />
</TelegramShareButton>
<TwitterShareButton
url={location.href}
title={shareTitle}
via="Kleros_io"
hashtags={["kleros", "appeals"]}
>
<TwitterIcon size={32} />
</TwitterShareButton>
</Flex>
</>
);
}
Example #28
| Source File: SuccessTransactionModal.js From paras-landing with GNU General Public License v3.0 | 4 votes |
|
SuccessTransactionModal = () => {
const [showModal, setShowModal] = useState(false)
const [token, setToken] = useState(null)
const [txDetail, setTxDetail] = useState(null)
const { currentUser, transactionRes, setTransactionRes } = useStore()
const router = useRouter()
const toast = useToast()
useEffect(() => {
const checkTxStatus = async () => {
const txHash = router.query.transactionHashes.split(',')
const txStatus = await near.getTransactionStatus({
accountId: near.currentUser.accountId,
txHash: txHash[txHash.length - 1],
})
if (window.sessionStorage.getItem('categoryToken')) {
await submitCategoryCard(txStatus)
}
await processTransaction(txStatus)
}
if (currentUser && router.query.transactionHashes) {
checkTxStatus()
}
}, [currentUser, router.query.transactionHashes])
useEffect(() => {
if (transactionRes) {
const txLast = transactionRes[transactionRes.length - 1]
if (txLast) {
processTransaction(txLast)
} else if (transactionRes.error) {
processTransactionError(transactionRes.error.kind.ExecutionError)
}
}
}, [transactionRes])
const processTransactionError = (err) => {
toast.show({
text: <div className="font-semibold text-center text-sm">{err}</div>,
type: 'error',
duration: null,
})
}
const processTransaction = async (txStatus) => {
if (txStatus?.status?.SuccessValue !== undefined) {
const { receipts_outcome } = txStatus
const { actions, receiver_id } = txStatus.transaction
for (const action of actions) {
const { FunctionCall } = action
const args = JSON.parse(decodeBase64(FunctionCall.args))
if (FunctionCall.method_name === 'nft_buy') {
const res = await axios.get(`${process.env.V2_API_URL}/token-series`, {
params: {
contract_id: receiver_id,
token_series_id: args.token_series_id,
},
})
setToken(res.data.data.results[0])
setTxDetail({ ...FunctionCall, args })
setShowModal(true)
} else if (FunctionCall.method_name === 'buy') {
const res = await axios.get(`${process.env.V2_API_URL}/token`, {
params: {
contract_id: args.nft_contract_id,
token_id: args.token_id,
},
})
setToken(res.data.data.results[0])
setTxDetail({ ...FunctionCall, args })
setShowModal(true)
} else if (FunctionCall.method_name === 'add_offer') {
const res = await axios.get(
`${process.env.V2_API_URL}/${args.token_id ? 'token' : 'token-series'}`,
{
params: {
contract_id: args.nft_contract_id,
token_id: args.token_id,
token_series_id: args.token_series_id,
},
}
)
setToken(res.data.data.results[0])
setTxDetail({ ...FunctionCall, args })
setShowModal(true)
} else if (FunctionCall.method_name === 'add_bid') {
const res = await axios.get(`${process.env.V2_API_URL}/token`, {
params: {
contract_id: args.nft_contract_id,
token_id: args.token_id,
},
})
setToken(res.data.data.results[0])
setTxDetail({ ...FunctionCall, args })
setShowModal(true)
} else if (FunctionCall.method_name === 'cancel_bid') {
const res = await axios.get(`${process.env.V2_API_URL}/token`, {
params: {
contract_id: args.nft_contract_id,
token_id: args.token_id,
},
})
setToken(res.data.data.results[0])
setTxDetail({ ...FunctionCall, args })
setShowModal(true)
} else if (FunctionCall.method_name === 'accept_bid') {
const res = await axios.get(`${process.env.V2_API_URL}/token`, {
params: {
contract_id: args.nft_contract_id,
token_id: args.token_id,
},
})
setToken(res.data.data.results[0])
setTxDetail({ ...FunctionCall, args })
setShowModal(true)
} else if (FunctionCall.method_name === 'cancel_auction') {
const res = await axios.get(`${process.env.V2_API_URL}/token`, {
params: {
contract_id: args.nft_contract_id,
token_id: args.token_id,
},
})
setToken(res.data.data.results[0])
setTxDetail({ ...FunctionCall, args })
setShowModal(true)
} else if (FunctionCall.method_name === 'nft_set_series_price') {
const res = await axios.get(`${process.env.V2_API_URL}/token-series`, {
params: {
contract_id: receiver_id,
token_series_id: args.token_series_id,
},
})
setToken(res.data.data.results[0])
setTxDetail({ ...FunctionCall, args })
setShowModal(true)
} else if (FunctionCall.method_name === 'nft_approve') {
const msgParse = JSON.parse(args?.msg)
const res = await axios.get(`${process.env.V2_API_URL}/token`, {
params: {
contract_id:
msgParse.market_type === 'accept_trade' ||
msgParse.market_type === 'accept_trade_paras_series'
? msgParse?.buyer_nft_contract_id
: receiver_id,
token_id:
msgParse?.market_type === 'accept_trade' ||
msgParse?.market_type === 'accept_trade_paras_series'
? msgParse?.buyer_token_id
: args.token_id,
},
})
setToken(res.data.data.results[0])
setTxDetail({ ...FunctionCall, args })
setShowModal(true)
} else if (FunctionCall.method_name === 'delete_market_data') {
const res = await axios.get(`${process.env.V2_API_URL}/token`, {
params: {
contract_id: args.nft_contract_id,
token_id: args.token_id,
},
})
setToken(res.data.data.results[0])
setTxDetail({ ...FunctionCall, args })
setShowModal(true)
} else if (FunctionCall.method_name === 'nft_create_series') {
const logs = JSON.parse(receipts_outcome[0].outcome?.logs?.[0])
const res = await axios.get(`${process.env.V2_API_URL}/token-series`, {
params: {
contract_id: receiver_id,
token_series_id: logs.params.token_series_id,
},
})
setToken(res.data.data.results[0])
setTxDetail({ ...FunctionCall, args, logs })
setShowModal(true)
}
}
}
}
const onCloseModal = () => {
const key = `${token.contract_id}::${token.token_series_id}${
token.token_id ? `/${token.token_id}` : ''
}`
mutate(key)
setShowModal(false)
setToken(null)
if (WalletHelper.activeWallet === walletType.sender) {
setTransactionRes(null)
} else {
removeTxHash()
}
}
const removeTxHash = () => {
const query = router.query
delete query.transactionHashes
router.replace({ pathname: router.pathname, query }, undefined, { shallow: true })
}
const submitCategoryCard = async (res) => {
const _categoryId = window.sessionStorage.getItem(`categoryToken`)
const txLast = res
const resFromTxLast = txLast.receipts_outcome[0].outcome.logs[0]
const resOutcome = await JSON.parse(`${resFromTxLast}`)
await retry(
async () => {
const res = await axios.post(
`${process.env.V2_API_URL}/categories/tokens`,
{
account_id: currentUser,
contract_id: txLast?.transaction?.receiver_id,
token_series_id: resOutcome?.params?.token_series_id,
category_id: _categoryId,
storeToSheet: _categoryId === 'art-competition' ? `true` : `false`,
},
{
headers: {
authorization: await WalletHelper.authToken(),
},
}
)
if (res.status === 403 || res.status === 400) {
sentryCaptureException(res.data?.message || `Token series still haven't exist`)
return
}
window.sessionStorage.removeItem('categoryToken')
},
{
retries: 20,
factor: 2,
}
)
}
if (!showModal || !token) return null
const tokenUrl = `${window.location.hostname}/token/${token.contract_id}::${
token.token_series_id
}${token.token_id ? `/${token.token_id}` : ''}`
const explorerUrl = (txhash) =>
getConfig(process.env.APP_ENV || 'development').explorerUrl + '/transactions/' + txhash
const onClickSeeToken = () => {
const url = `/token/${token.contract_id}::${token.token_series_id}${
token.token_id ? `/${token.token_id}` : ''
}${txDetail.method_name === 'add_offer' ? '?tab=offers' : ''}`
router.push(url)
onCloseModal()
}
const titleText = () => {
if (txDetail.method_name === 'add_offer') {
return 'Offer Success'
} else if (txDetail.method_name === 'add_bid') {
return 'Place Bid Success'
} else if (txDetail.method_name === 'cancel_bid') {
return 'Success Remove Bid'
} else if (txDetail.method_name === 'accept_bid') {
return 'Accept Bid Success'
} else if (txDetail.method_name === 'nft_buy' || txDetail.method_name === 'buy') {
return 'Purchase Success'
} else if (txDetail.method_name === 'nft_set_series_price') {
return 'Update Price Success'
} else if (txDetail.method_name === 'nft_approve') {
const msg = JSON.parse(txDetail.args.msg)
if (msg.market_type === 'sale' && !msg.is_auction) {
return 'Update Listing Success'
} else if (msg.market_type === 'accept_offer') {
return 'Accept Offer Success'
} else if (msg.market_type === 'add_trade') {
return 'Add Trade Success'
} else if (msg.is_auction) {
return 'Create Auction Success'
} else if (
msg.market_type === 'accept_trade' ||
msg.market_type === 'accept_trade_paras_series'
) {
return 'Accept Trade Success'
}
} else if (txDetail.method_name === 'delete_market_data') {
const args = txDetail.args
if (args.is_auction) {
return 'Remove Auction Success'
}
return 'Remove Listing Success'
} else if (txDetail.method_name === 'nft_create_series') {
return 'Create Card Success'
} else {
return 'Transaction Success'
}
}
const descText = () => {
if (txDetail.method_name === 'add_offer') {
return (
<>
You successfully offer <b>{token.metadata.title}</b> for{' '}
{formatNearAmount(txDetail.args.price)} Ⓝ
</>
)
} else if (txDetail.method_name === 'add_bid') {
return (
<>
You successfully bid of auction <b>{token.metadata.title}</b> for{' '}
{prettyBalance(txDetail.args.amount, 24, 2)} Ⓝ
</>
)
} else if (txDetail.method_name === 'cancel_bid') {
return (
<>
You successfully remove bid auction <b>{token.metadata.title}</b> for{' '}
{formatNearAmount(txDetail.args.amount)} Ⓝ
</>
)
} else if (txDetail.method_name === 'accept_bid') {
return (
<>
You successfully accept bid auction <b>{token.metadata.title}</b>
</>
)
} else if (txDetail.method_name === 'cancel_auction') {
return (
<>
You successfully remove auction <b>{token.metadata.title}</b>
</>
)
} else if (txDetail.method_name === 'nft_buy' || txDetail.method_name === 'buy') {
return (
<>
You successfully purchase <b>{token.metadata.title}</b>
</>
)
} else if (txDetail.method_name === 'nft_set_series_price') {
if (txDetail.args.price) {
return (
<>
You successfully update <b>{token.metadata.title}</b> price to{' '}
{formatNearAmount(txDetail.args.price)} Ⓝ
</>
)
}
return (
<>
You successfully remove the listing <b>{token.metadata.title}</b>
</>
)
} else if (txDetail.method_name === 'nft_approve') {
const msg = JSON.parse(txDetail.args.msg)
if (msg.market_type === 'sale') {
return (
<>
You successfully {msg.is_auction ? 'create auction' : 'update'}{' '}
<b>{token.metadata.title}</b> with starting price {formatNearAmount(msg.price || 0)} Ⓝ
</>
)
} else if (msg.market_type === 'accept_offer') {
return (
<>
You successfully accept offer <b>{token.metadata.title}</b>
</>
)
} else if (msg.market_type === 'add_trade') {
return (
<>
You successfully trade your NFT <b>{token.metadata.title}</b>
</>
)
} else if (
msg.market_type === 'accept_trade' ||
msg.market_type === 'accept_trade_paras_series'
) {
return (
<>
You successfully accept NFT <b>{token.metadata.title}</b>
</>
)
}
} else if (txDetail.method_name === 'delete_market_data') {
return (
<>
You successfully remove the listing <b>{token.metadata.title}</b>
</>
)
} else if (txDetail.method_name === 'nft_create_series') {
return (
<>
You successfully create <b>{token.metadata.title}</b>
</>
)
}
}
return (
<Modal isShow={showModal} close={onCloseModal} className="p-8">
<div className="max-w-sm w-full p-4 bg-gray-800 md:m-auto rounded-md relative">
<div className="absolute right-0 top-0 pr-4 pt-4">
<div className="cursor-pointer" onClick={onCloseModal}>
<IconX />
</div>
</div>
<div>
<h1 className="text-2xl font-bold text-white tracking-tight">{titleText()}</h1>
<p className="text-white mt-2">{descText()}</p>
<div className="p-4">
<div className="w-2/3 m-auto h-56">
<Media
className="rounded-lg overflow-hidden h-full w-full"
url={token.metadata.media}
videoControls={true}
videoLoop={true}
videoMuted={true}
videoPadding={false}
/>
</div>
</div>
{router.query.transactionHashes && (
<div className="p-3 bg-gray-700 rounded-md mt-2 mb-4">
<p className="text-gray-300 text-sm">Transaction Hash</p>
{router.query.transactionHashes.split(',').map((txhash) => (
<a href={explorerUrl(txhash)} key={txhash} target="_blank" rel="noreferrer">
<p className="text-white hover:underline cursor-pointer overflow-hidden text-ellipsis">
{txhash}
</p>
</a>
))}
</div>
)}
<div className="flex justify-between px-1 mb-4">
<p className="text-sm text-white">Share to:</p>
<div className="flex gap-2">
<FacebookShareButton url={tokenUrl} className="flex text-white">
<FacebookIcon size={24} round />
</FacebookShareButton>
<TelegramShareButton url={tokenUrl} className="flex text-white">
<TelegramIcon size={24} round />
</TelegramShareButton>{' '}
<TwitterShareButton
title={`Checkout ${token.metadata.title} from collection ${token.metadata.collection} on @ParasHQ\n\n#paras #cryptoart #digitalart #tradingcards`}
url={tokenUrl}
className="flex text-white"
>
<TwitterIcon size={24} round />
</TwitterShareButton>
</div>
</div>
<Button size="md" isFullWidth onClick={onClickSeeToken}>
See Token
</Button>
</div>
</div>
</Modal>
)
}
Example #29
| Source File: App.js From covid19action with MIT License | 4 votes |
|
function App() {
const {
history,
location: { pathname },
} = useReactRouter();
useEffect(() => {
if (!routes.includes(pathname)) {
history.replace(routes[0]);
}
// eslint-disable-next-line
}, []);
const [state, dispatch] = useReducer(reducer, initialState);
const i18n = state.i18n;
const aRelevantLanguages = getValidLocale();
const handleTabSelect = event => {
history.push(mapTabToRoute(event.parameters.item.slot));
};
return (
<div className="App">
<div className="Covid19App">
<div className="headerShellBar">
<div className="shellBarLeft">
<Button
design={ButtonDesign.Transparent}
icon="home"
className="shellBarBtn"
onClick={() => window.location.replace('https://myswastha.in/')}
></Button>
</div>
<div className="shellBarCenter">{i18n.HOME_TITLE}</div>
<div className="shellBarRight">
<Button
design={ButtonDesign.Transparent}
icon="world"
className="shellBarBtn"
onClick={() => dispatch({ type: 'openLanguageDialog' })}
></Button>
<Button
design={ButtonDesign.Transparent}
icon="sys-help"
className="shellBarIconBtn"
onClick={() => dispatch({ type: 'openDialog' })}
></Button>
<ActionSheet
openBy={
<Button
design={ButtonDesign.Transparent}
icon="share"
className="shellBarIconBtn"
/>
}
placement={'Bottom'}
>
<FacebookShareButton
url="https://myswastha.in/"
quote={i18n.SHARING_TITLE}
hashtag="#MySwastha #FlattenTheCurve"
>
<FacebookIcon size={32} round={true} />
</FacebookShareButton>
<WhatsappShareButton url="https://myswastha.in/" title={i18n.SHARING_TITLE}>
<WhatsappIcon size={32} round={true} />
</WhatsappShareButton>
<TwitterShareButton
url="https://myswastha.in/"
title={i18n.SHARING_TITLE}
hashtags={['FlattenTheCurve', 'MySwastha']}
via={['nitish_mehta']}
>
<TwitterIcon size={32} round={true} />
</TwitterShareButton>
<LinkedinShareButton url="https://myswastha.in/" title={i18n.SHARING_TITLE}>
<LinkedinIcon size={32} round={true} />
</LinkedinShareButton>
</ActionSheet>
</div>
</div>
<MessageStrip
className="archivedNotification"
icon={null}
noCloseButton={true}
noIcon={false}
type={'Warning'}
>
NOTE: This app has been archived. <br />
Kindly use{' '}
<Link href="https://www.mygov.in/aarogya-setu-app/" target="_blank" wrap>
Aarogya Setu{' '}
</Link>{' '}
app or{' '}
<Link href="https://www.mohfw.gov.in/" target="_blank" wrap>
Ministry of Health{' '}
</Link>{' '}
website for latest info. <b>Stay Safe & Healthy !</b>
</MessageStrip>
<TabContainer className="c19IconTab" showOverflow onItemSelect={handleTabSelect} fixed>
<Tab text={i18n.UNWELL} icon="stethoscope" selected={pathname === routes[0]}>
<TabEligibilityChecker i18n={i18n} />
</Tab>
<Tab icon="notes" selected={pathname === routes[1]}>
<TabIndiaInfo i18n={i18n} />
</Tab>
<Tab text={''} icon="business-objects-experience" selected={pathname === routes[2]}>
<TabMoreInfo i18n={i18n} />
</Tab>
</TabContainer>
<Dialog
headerText={i18n.ABOUT_THIS_WEBSITE}
stretch={false}
open={state.isHelpDialogOpen}
footer={
<Button className="dialogFooterBtn" onClick={() => dispatch({ type: 'closeDialog' })}>
{i18n.CLOSE}
</Button>
}
>
<div style={{ width: '300px', height: '400px' }}>
<Label wrap className="disclaimerText">
{i18n.WEBSITE_DISCLAIMER}
</Label>
<br />
<br />
<Label wrap>{i18n.WEBSITE_DESCRIPTION_1}</Label>
<br />
<br />
<Label wrap>
{i18n.WEBSITE_DESCRIPTION_2}{' '}
<Link href="https://github.com/nitish-mehta/covid19action" target="_blank" wrap>
GitHub{' '}
</Link>
{i18n.WEBSITE_DESCRIPTION_3}
</Label>
<br />
<Label wrap>
{i18n.WEBSITE_DESCRIPTION_4}{' '}
<Link href="https://twitter.com/nitish_mehta" target="_blank" wrap>
Twitter
</Link>{' '}
{i18n.AND}{' '}
<Link href="https://www.linkedin.com/in/nitishmehta08/" target="_blank" wrap>
LinkedIn.
</Link>{' '}
</Label>
<br />
<br />
<Label wrap>{i18n.WEBSITE_DESCRIPTION_5}</Label>
<br />
<br />
<FlexBox
justifyContent={'SpaceBetween'}
alignItems={'Stretch'}
direction={'Row'}
displayInline={false}
fitContainer
>
<FacebookShareButton
url="https://myswastha.in/"
quote={i18n.SHARING_TITLE}
hashtag="#MySwastha #FlattenTheCurve"
>
<FacebookIcon size={32} round={true} />
</FacebookShareButton>
<WhatsappShareButton url="https://myswastha.in/" title={i18n.SHARING_TITLE}>
<WhatsappIcon size={32} round={true} />
</WhatsappShareButton>
<TwitterShareButton
url="https://myswastha.in/"
title={i18n.SHARING_TITLE}
hashtags={['FlattenTheCurve', 'MySwastha']}
via={['nitish_mehta']}
>
<TwitterIcon size={32} round={true} />
</TwitterShareButton>{' '}
<LinkedinShareButton url="https://myswastha.in/" title={i18n.SHARING_TITLE}>
<LinkedinIcon size={32} round={true} />
</LinkedinShareButton>
</FlexBox>
</div>
</Dialog>
<Dialog
headerText={'Change Language'}
stretch={false}
open={state.isLanguageDialogOpen}
footer={
<Button
className="dialogFooterBtn"
onClick={() => dispatch({ type: 'closeLanguageDialog' })}
>
{i18n.CLOSE}
</Button>
}
>
<div style={{ width: '250px', height: '300px' }}>
<Link
href="
https://github.com/nitish-mehta/covid19action#how-can-you-help"
target="_blank"
wrap
>
(Help Improve Translations)
</Link>{' '}
<ul>
{aRelevantLanguages.map(currentVal => {
return (
<li key={currentVal.code}>
<Button
design={ButtonDesign.Transparent}
onClick={() => {
dispatch({ type: 'closeLanguageDialog' });
dispatch({
type: 'i18nChange',
payload: changeCurrentLocale(currentVal.code),
});
}}
>
{currentVal.displayText}
</Button>
</li>
);
})}
</ul>
</div>
</Dialog>
</div>
</div>
);
}
