react-device-detect#isMobileOnly JavaScript Examples
The following examples show how to use
react-device-detect#isMobileOnly.
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: index.js From new_sommelier_website with MIT License | 6 votes |
|
MobileProfile = ({data}) => {
return (
<ContainerMobile className='profile-container'>
<img src={data.avatar} className='img-avatar' width={isMobileOnly ? 106 : 172}/>
<div className='caption-container'>
<h3>{data.name}</h3>
<p>{data.role}</p>
<div>
<a href={data.twitter} target="_blank"><img src={twIcon} /></a>
<a href={data.linkedin} target="_blank"><img src={liIcon} /></a>
</div>
</div>
</ContainerMobile>
)
}
Example #2
| Source File: index.js From new_sommelier_website with MIT License | 6 votes |
|
Profile = ({data, isPortrait}) => {
if (isMobileOnly) {
return (<MobileProfile data={data} />)
}
return (
<div>
{isPortrait ? (
<Container className='profile-container'>
<img src={data.avatar} className='img-avatar' width={isMobileOnly ? 106 : 172}/>
<div className='caption-container'>
<h3>{data.name}</h3>
<p>{data.role}</p>
<div>
<a href={data.twitter} target="_blank"><img src={twIcon} /></a>
<a href={data.linkedin} target="_blank"><img src={liIcon} /></a>
</div>
</div>
</Container>
) : (
<ContainerLandscape className='profile-container'>
<img src={data.avatar} className='img-avatar'/>
<div className='caption-container'>
<h3>{data.name}</h3>
<p>{data.role}</p>
<div>
<a href={data.twitter} target="_blank"><img src={twIcon} /></a>
<a href={data.linkedin} target="_blank"><img src={liIcon} style={{marginTop: '-5px'}}/></a>
</div>
</div>
</ContainerLandscape>
)}
</div>
)
}
Example #3
| Source File: Main.js From new_sommelier_website with MIT License | 4 votes |
|
export default function Main() {
useEffect(() => {
function handleResize() {
setWindowDimensions(getWindowDimensions());
}
windowGlobal.addEventListener("resize", handleResize);
return () => window.removeEventListener("resize", handleResize);
}, []);
const [windowDimensions, setWindowDimensions] = useState(
getWindowDimensions()
);
const [hover, setHover] = useState(false);
const onHover = () => {
setHover(true);
};
const onLeave = () => {
setHover(false);
};
const teamItemWidth = 250
const carsouselWidth = teamItemWidth * teamMembers3.length
const carsouselUsecasesWidth = windowDimensions.width * usecasesData.length
return (
<div className='mt-5 main-container'>
<div className='main-top'>
<div className='main-top__left-container'>
<div>
<h1 className='text-uppercase d-lg-block d-md-none d-block'>
Welcome to<br/>Sommelier<br />the <span >new coprocessor</span><br />for Ethereum
</h1>
<h1 className='text-uppercase d-lg-none d-md-block d-none'>
Welcome to Sommelier the <span >new coprocessor</span><br />for Ethereum
</h1>
<p className='caption-text-small mt-3'>Move your DeFi assets into higher<br />yields faster and cheaper</p>
<div onMouseEnter={onHover} onMouseLeave={onLeave}>
<a className='launch-button' style={{ marginTop: '4.063rem', fontSize: '1.06rem' }} target="_blank">
<img src={frameImg} alt='frame image' className='mr-2'/>
Launch Application
<br/> {hover ? "(COMING SOON)" : null}
</a>
</div>
</div>
</div>
<div className='main-top__right-container'>
<img src={etheriumImg} alt='frame image' />
</div>
</div>
<a name="features" id='features'></a>
<div className='main-why section-container'>
<div className='main-top__left-container'>
<h1 className='text-uppercase'>
Why <span >Sommelier</span>
</h1>
</div>
<div className='main-why__content row'>
<div className='main-why__content__img-container'>
<img src={etheriumImg1} alt='etherium image' className='mr-2 main-why__content__img-container__img'/>
<img src={etheriumMobileImg} alt='etherium image' className='mr-2 main-why__content__img-container__img-mobile' width='74'/>
</div>
<div className='main-why__right-container'>
<ul>
<li>
<img src={cosmosImg} alt='Cosmos Image' />
<h4>Cosmos Stargate SDK</h4>
<p>Modular and robust protocol with Tendermint Consensus delivers world class and tested protocol layer</p>
</li>
<li>
<img src={etherbridgeImg} alt='Ether Bridge Image' />
<h4>Bi-Directional Ethereum Bridge</h4>
<p>Ethereum transactions are managed by the most functional bridge optimized for extending Ethereum features for users</p>
</li>
<li>
<img src={secureImg} alt='Secure Image' />
<h4>Secure</h4>
<p>Transactions are managed by the Sommelier validator set with decentralized governance. Sommelier cannot steal user funds</p>
</li>
<li>
<img src={automatedImg} alt='Automated Image' />
<h4>Automated</h4>
<p>Automated signature management for Ethereum transactions enable automated DeFi trading for increased liquidity momentum and yield capture</p>
</li>
</ul>
</div>
</div>
</div>
<a name="usecases" id='usecases'></a>
<div className='main-usecases section-container'>
<div className='main-top__left-container'>
<h2 className='text-uppercase'>
Use Cases
</h2>
</div>
<div className='main-usecases__content'>
{isMobileOnly ? (
<div style={{width: carsouselUsecasesWidth, display: 'flex'}}>
<ul className='main-usecases__content__carousel'
// plugins={[
// 'centered',
// {
// resolve: slidesToShowPlugin,
// options: {
// numberOfSlides: 1,
// },
// },
// ]}
>
{usecasesData.map((item, index) => (
<li style={{width: windowDimensions.width}}>
<div>
<img src={item.img} width='106' />
<h3>{item.title}</h3>
<p>{item.description}</p>
</div>
</li>
))}
</ul>
</div>
) : (
<ul>
{usecasesData.map((item, index) => (
<li>
<div>
<img src={item.img} width='106' />
<h3>{item.title}</h3>
<p>{item.description}</p>
</div>
</li>
))}
</ul>
)}
</div>
</div>
<a name="roadmap" id="roadmap"></a>
<div className='main-roadmap'>
<div className='main-top__left-container'>
<h2 className='text-uppercase'>
Roadmap
</h2>
</div>
<div className='main-roadmap__content'>
<div className='main-roadmap__content__q-left'>
<div>
<h3>Q2 2021</h3>
<ul>
<li><span>Sommelier Testnet Alpha 1 Live</span></li>
<li>Sommelier Testnet Audit complete<br /></li>
<li>Sommelier Testnet Alpha 2 Live<br /></li>
<li>Sommelier Public Validator Invite<br /></li>
<li>Sommelier Mainnet 1 Live</li>
</ul>
</div>
</div>
<img className='main-roadmap__content__stick' src={stickImg} width='35' height='794'></img>
<img className='main-roadmap__content__stick-mobile' src={stickMobileImg} width='30' height='824'></img>
<div className='main-roadmap__content__q-right'>
<div className='main-roadmap__content__q-right__1'>
<h3>Q1 2021</h3>
<ul>
<li><span>Uniswap and Ethereum Oracles on Cosmos SDK<br /></span></li>
<li>Ethereum Liquidity Logic implemented on Gravity<br /></li>
<li>Ethereum and Cosmos wallet integration complete<br /></li>
<li>Sommelier Impermanent Loss tracking app live</li>
</ul>
</div>
<div className='main-roadmap__content__q-right__3'>
<h3>Q2 2021</h3>
<ul>
<li>Sommelier Testnet Alpha 1 Live<br /></li>
<li>Sommelier Testnet Audit complete<br /></li>
<li>Sommelier Testnet Alpha 2 Live<br /></li>
<li>Sommelier Public Validator Invite<br /></li>
<li>Sommelier Mainnet 1 Live</li>
</ul>
</div>
<div className='main-roadmap__content__q-right__2'>
<h3>Q3 2021</h3>
<ul>
<li>Sommelier Automated DeFi Selections on Uniswap<br /></li>
<li>Sommelier Automated DeFi Selections on Sushiswap<br /></li>
<li>Sommelier Automated DeFi Selections on Binance Chain<br /></li>
<li>Sommelier DAO launches</li>
</ul>
</div>
</div>
</div>
</div>
<div className='main-about section-container'>
<div className='main-about__left'>
<div className='main-about__left__img-container'/>
</div>
<div className='main-about__right'>
<a name="about" id="about"></a>
<h2>About</h2>
<p>
Sommelier is a bet that Ethereum will be a dominant
player in the global economy. Sommelier consists of the
Cosmos Stargate SDK, its Tendermint-based consensus
layer and a decentralized, bi-directional Ethereum bridge,
managed by a global network of validators.
<br /><br />
Liquidity Providers (LPs) will be able to use the Sommelier
to author and execute complex, and automated financial
transactions, such as portfolio rebalancing, limit orders,
batched orders, as well as a host of other features that
traders have come to expect from CeFi, but that are not
currently available in DeFi.
</p>
<div onMouseEnter={onHover} onMouseLeave={onLeave}>
<a className='launch-button' style={{ marginTop: '4.063rem', fontSize: '1.6rem' }} target="_blank">
<img src={frameImg} alt='frame image' className='mr-2'/>
Launch Application
<br/> {hover ? "(COMING SOON)" : null}
</a>
</div>
</div>
</div>
<a name="team" id='team'></a>
<div className='main-team section-container'>
<h2>Team</h2>
<div className='main-team__top'>
{teamMembers1 && (
<ul>
{teamMembers1.map((item, index) => (
<li>
<Profile data={item} isPortrait={true} />
</li>
))}
</ul>
)}
</div>
<div className='main-team__down'>
{teamMembers2 && (
<ul>
{teamMembers2.map((item, index) => (
<li>
<Profile data={item} isPortrait={false} />
</li>
))}
</ul>
)}
</div>
<div className='main-team__all'>
{isMobileOnly ? (
<div className='main-team__all__carousel' style={{width: carsouselWidth, display: 'flex'}}
// plugins={[
// 'centered',
// {
// resolve: slidesToShowPlugin,
// options: {
// numberOfSlides: 1.5,
// },
// },
// ]}
>
{teamMembers3.map((item, index) => (
<div style={{width: teamItemWidth, display: 'flex', justifyContent: 'center'}}>
<Profile data={item} isPortrait={index < 6 ? true : isMobileOnly ? true : false} />
</div>
))}
</div>
) : (
<ul>
{teamMembers3.map((item, index) => (
<li style={index < 6 ? {width: '50%'} : {width: '100%'}}>
<Profile data={item} isPortrait={index < 6 ? true : isMobileOnly ? true : false} />
</li>
))}
</ul>
)}
</div>
</div>
<div className='main-investors section-container'>
<h2 className="text-center">INVESTORS</h2>
<div className='main-investors__img-container'>
<img src={cygnilabsImg} width='112' />
<img src={standardImg} width='134' />
<img src={multicoinImg} width='271' />
<img src={alamedaImg} width='261' />
</div>
</div>
</div>
)
}
Example #4
| Source File: Navigation.js From new_sommelier_website with MIT License | 4 votes |
|
Nav = ({ settings, lang, pathname }) => {
const [showMenu, setShowMenu] = React.useState(!isMobileOnly)
const [notification, setNotification] = useState(false);
const [notificationErrMsg, setNotificationErrMsg] = useState('');
const [notificationErrMsgSub, setNotificationErrMsgSub] = useState('');
const {
getArrowProps,
getTooltipProps,
setTooltipRef,
setTriggerRef,
visible,
} = usePopperTooltip();
const [hover, setHover] = useState(false);
const onHover = () => {
setHover(true);
};
const onLeave = () => {
setHover(false);
};
useEffect(() => {
// checkNotificationPermission();
askNotificationPermission();
}, [])
const showAlert = () => {
alert("I'm an alert");
}
const handleHamburger = () => {
setShowMenu(!showMenu)
}
const handleMoveToSection = (e, msgId) => {
if (pathname === '/') { // Only apply to home page
e.preventDefault();
const ref = document.querySelector(`#${msgId}`);
if (ref) {
ref.scrollIntoView({ behavior: "smooth", block: "center" });
}
}
}
const checkNotificationPermission = () => {
console.info('starting.....');
if (typeof window === `undefined`) {
setNotification(false);
return;
}
if (!("Notification" in window)) {
setNotification(false);
setNotificationErrMsg('This browser does not support notifications.');
setNotificationErrMsgSub('');
return;
}
console.log('notification permission', Notification.permission);
if (Notification.permission === 'denied') {
setNotification(false);
setNotificationErrMsg('To allow Notifications, go to your Browser Settings.');
setNotificationErrMsgSub('You will only receive notifications when your Browser is open');
return;
}
if (Notification.permission === 'default') {
setNotification(false);
setNotificationErrMsg('To receive Notifications, click to allow Notifications.');
setNotificationErrMsgSub('You will only receive notifications when your Browser is open');
return;
}
if (Notification.permission === 'granted') {
setNotification(true);
enableNotifications();
}
}
const askNotificationPermission = () => {
if (typeof window === `undefined`) {
return;
}
if (!("Notification" in window)) {
setNotification(false);
setNotificationErrMsg('This browser does not support notifications.');
setNotificationErrMsgSub('');
} else {
if(checkNotificationPromise()) {
Notification.requestPermission()
.then((permission) => {
checkNotificationPermission();
})
} else {
Notification.requestPermission(function(permission) {
checkNotificationPermission();
});
}
}
}
const checkNotificationPromise = () => {
try {
Notification.requestPermission().then();
} catch(e) {
return false;
}
return true;
}
const toggleNotification = (e) => {
e.preventDefault();
console.log(Notification.permission);
if (notification === false) {
askNotificationPermission();
} else {
}
}
const enableNotifications = async () => {
if (typeof window === `undefined`) {
return;
}
if (!('serviceWorker' in navigator)) {
return;
}
if (!('PushManager' in window)) {
return;
}
console.log(navigator);
const sw = await navigator.serviceWorker.ready;
console.log(sw);
const subscription = await sw.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey: 'BNDpN_mS7a-Os4xUorT-NPjhgRpgK7GoWsggHFF5psOTgbn5SPeo_G6rJeFzjqtVazgmt5bZDdHrsrGZH4uSJkE'
});
const apiBaseUrl = 'https://msg.sommelier.finance/api';
// const apiBaseUrl = 'http://localhost:8001/api';
await fetch(`${apiBaseUrl}/subscribe`, {
method: 'POST',
body: JSON.stringify(subscription),
headers: {
'content-type': 'application/json'
}
});
console.log('service worker', subscription);
}
return (
<header className='container-fluid'>
<nav className='' role='navigation'>
<div className='nav-container d-flex container'>
<div className='text-primary nav-container__title'>
<button onClick={handleHamburger} className='d-block d-sm-none'>
<img src='/images/button-hamburger.png' width='24' />
</button>
<Link to='/'>
<p className='nav-title m-0'>SOMMELIER</p>
</Link>
</div>
{showMenu && (
<div className='flex-grow-1 nav-container__menu-container'>
<ul className='ml-auto'>
{
}
<li key={1} >
<a href='/#features' onClick={(e) => handleMoveToSection(e, 'features')} className='nav-menu-item'>Features</a>
</li>
<li key={2} >
<a href='/#usecases' onClick={(e) => handleMoveToSection(e, 'usecases')} className='nav-menu-item'>Use Cases</a>
</li>
<li key={3} >
<a href='/resources' className='nav-menu-item'>Resources</a>
</li>
<li key={4} >
<a href='/#about' onClick={(e) => handleMoveToSection(e, 'about')} className='nav-menu-item'>About</a>
</li>
<li key={5} >
<Link to={`https://community.sommelier.finance/`} className='nav-menu-item' target='new'>
{`Community`}
</Link>
</li>
<li key={6} >
<Link to={`/events/`} className='nav-menu-item'>
{`Events`}
</Link>
</li>
<li key={7} >
<Link to={`/blog/`} className='nav-menu-item'>
{`Blog`}
</Link>
</li>
<li key={6} >
<Link to={`/jobs`} className='nav-menu-item' >
{`Jobs`}
</Link>
</li>
<li key={7}>
<a
className='nav-menu-item'
onClick={(e) => toggleNotification(e)}
ref={setTriggerRef}
>
{!notification && <img src={notificationOffImg} height={27} />}
{notification && <img src={notificationOnImg} height={27} />}
</a>
{visible && !notification && notificationErrMsg && (
<div
ref={setTooltipRef}
{...getTooltipProps({ className: 'tooltip-container' })}
>
<div {...getArrowProps({ className: 'tooltip-arrow' })} />
<div style={{ textAlign: 'center' }}>{notificationErrMsg}</div>
<div style={{ textAlign: 'center', padding: '0 10px' }}>{notificationErrMsgSub}</div>
</div>
)}
</li>
<li key={999} className='d-flex align-items-center launch-button'>
<div onMouseEnter={onHover} onMouseLeave={onLeave}>
<a className='nav-menu-item nav-menu-item--launch' target="_blank">
<img src={frameImg} alt='frame image' className='mr-2'/>
Launch Application
<br/> {hover ? "(COMING SOON)" : null}
</a>
</div>
</li>
</ul>
</div>
)}
</div>
</nav>
</header>
)
}
Example #5
| Source File: demo-entry.js From demolab with MIT License | 4 votes |
|
export default function APIDemo({ data }) {
console.log(data)
const links = data.markdownRemark.frontmatter.links;
const title = data.markdownRemark.frontmatter.title;
const codeEmbedLink = data.markdownRemark.frontmatter['code_embed_link'];
const demoFileName = data.markdownRemark.frontmatter['fileName'];
const category = data.markdownRemark.frontmatter.category;
const demoURL = data.markdownRemark.frontmatter.demoURL;
const disqusConfig = {
shortname: "greenroots",
config: { identifier: shortid.generate(), title },
};
const [demo, setDemo] = useState([]);
const [showCodeBtn, setShowCodeBtn] = useState(true);
const hasDemoURL = !demoURL ? false : true;
const hasDemoFile = !demoFileName ? false : true;
// Hide the Code Tab if there is no Code Embed link
const shouldHideCodeTab =
_.isUndefined(codeEmbedLink) || _.isNull(codeEmbedLink) || (isMobileOnly && !isTablet);
// Hide the demo tab if there is neither a demo file and URL
const showDemoTab = (hasDemoFile || hasDemoURL);
const addComponent = async file => {
console.log(`Loading ${file} component...`);
const demoFolder = _.startCase(_.camelCase(category.name)).replace(/ /g, '');
import(`../demos/${demoFolder}/${file}.js`)
.then(component => {
let temp = []
temp.push(component.default);
setDemo(temp);
})
.catch(error => {
console.error(`"${file}" is not loaded successfully due to the ${error}`);
})
}
useEffect(() => {
async function fetchAPIDemo() {
await addComponent(demoFileName)
}
// We need to go inside fetch API only if there us a Demo File
hasDemoFile && fetchAPIDemo();
}, []);
const getDefaultTabKey = () => {
if (showDemoTab) {
return "demo";
} else if (!shouldHideCodeTab) {
return "scode";
} else {
return "read";
}
}
const getDescription = () => {
return { __html: data.markdownRemark.html }
}
const getLinkPart = (link, part) => {
const SEPARATOR = "$#$#$#"
const arr = link.split(SEPARATOR)
if (part === "origin") {
return arr[0]
} else if (part === "base") {
return arr[1]
}
return link
}
const showCode = () => {
setShowCodeBtn(false);
sdk.embedProjectId(
"codeEmbed",
codeEmbedLink,
{
clickToLoad: true,
openFile: 'index.js',
view: 'editor',
height: 500,
hideExplorer: true,
hideNavigation: true,
}
)
}
return (
<Layout>
<SEO title={title} />
<h1>{title}</h1>
<div dangerouslySetInnerHTML={getDescription()} />
<Tabs
defaultActiveKey={getDefaultTabKey()}
id="demo-entry-tab"
>
{
showDemoTab &&
<Tab eventKey="demo"
title={<Emoji label="Laptop" symbol="laptop" text="See Demo" />}
style={{ padding: "10px" }}>
<div>
{hasDemoFile && demo.length > 0 &&
demo.map((Component, index) => <Component key={index} />)
}
{hasDemoURL && (
<DemoFromURL url={ demoURL } />
)}
</div>
</Tab>
}
{
!shouldHideCodeTab &&
<Tab
eventKey="scode"
title={<Emoji label="Input Symbols" symbol="input-symbols" text="Source Code" />}
style={{ padding: "10px" }}>
<div className="column">
{
showCodeBtn &&
<StyledButton
onClick={showCode}>
Click to Load the Source Code
</StyledButton>
}
<div id="codeEmbed"></div>
</div>
</Tab>
}
<Tab eventKey="read"
title={<Emoji label="Green Book" symbol="green-book" text="Learn about it!" />}
style={{ padding: "10px" }}>
{links && links.length > 0 && (
<div>
Learn about it from:
<ul>
{links.map((link, index) => (
<li className={demoEntryStyles.learnings} key={shortid.generate()}>
<a
href={getLinkPart(link, "base")}
target="_blank"
rel="noreferrer"
>
{getLinkPart(link, "origin")}
</a>
</li>
))}
</ul>
</div>
)}
</Tab>
</Tabs>
<div className={demoEntryStyles.comment}>
<DiscussionEmbed {...disqusConfig} />
</div>
</Layout>
)
}
