LumeWeb
/
skynet-webportal
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #402 from NebulousLabs/remove-reveal-and-fade-effects 

Remove reveal and fade effects
This commit is contained in:
Karol Wypchło 2020-09-14 17:02:57 +02:00 committed by GitHub
parent aa2dff5e5f 0cf50720fe
commit 6774a8a262
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 463 additions and 636 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
packages/webapp/cypress/integration/intergration.spec.js
View File

@ -19,7 +19,8 @@ context("Skynet", () => {
cy.get('.home-upload input[type="file"]').attachFile(fileName);
cy.get(".home-uploaded-files").children().should("have.length", 1).scrollIntoView();
cy.get(".home-upload").scrollIntoView();
cy.get(".home-uploaded-files").children().should("have.length", 1);
// wait max 2 minutes, the portal might be slow at times
cy.wait("@upload", { responseTimeout: 2 * 60 * 1000 });

1
packages/webapp/package.json
View File

@ -30,7 +30,6 @@
"react-helmet": "6.1.0",
"react-mailchimp-form": "1.0.2",
"react-mailchimp-subscribe": "2.1.0",
"react-reveal": "1.2.2",
"react-syntax-highlighter": "13.5.3",
"react-visibility-sensor": "5.1.1",
"skynet-js": "0.0.8",

302
packages/webapp/src/components/Footer/Footer.js
View File

@ -1,6 +1,4 @@
import React from "react";
import Fade from "react-reveal/Fade";
import Reveal from "react-reveal/Reveal";
import { FooterOrb, FooterCube, Built } from "../../svg";
import "./Footer.scss";
@ -8,164 +6,150 @@ import { Mailing } from "..";
export default function Footer() {
return (
<Reveal effect="active">
<footer className="footer" id="footer">
<div className="width">
<Fade duration={700} distance="40px" bottom>
<div className="footer-column">
<Built width={120} height={120} preserveAspectRatio={"xMinYMin"} />
</div>
</Fade>
<div className="footer-column">
<Fade duration={700} distance="40px" bottom>
<h2>Skynet Webportals</h2>
<ul>
<li>
<a href="https://skydrain.net" target="_blank" rel="noopener noreferrer">
skydrain.net
</a>
</li>
<li>
<a href="https://sialoop.net" target="_blank" rel="noopener noreferrer">
sialoop.net
</a>
</li>
<li>
<a href="https://skynet.luxor.tech" target="_blank" rel="noopener noreferrer">
skynet.luxor.tech
</a>
</li>
<li>
<a href="https://skynet.tutemwesi.com" target="_blank" rel="noopener noreferrer">
skynet.tutemwesi.com
</a>
</li>
<li>
<a href="https://siacdn.com" target="_blank" rel="noopener noreferrer">
siacdn.com
</a>
</li>
<li>
<a href="https://vault.lightspeedhosting.com" target="_blank" rel="noopener noreferrer">
vault.lightspeedhosting.com
</a>
</li>
</ul>
</Fade>
</div>
<div className="footer-column">
<Fade duration={700} distance="40px" bottom>
<h2>For Developers</h2>
<ul>
<li>
<a href="https://blog.sia.tech/skynet-bdf0209d6d34" target="_blank" rel="noopener noreferrer">
Skynet Overview
</a>
</li>
<li>
<a href="https://sia.tech/docs/#skynet" target="_blank" rel="noopener noreferrer">
API Docs
</a>
</li>
<li>
<a
href="https://github.com/NebulousLabs/skynet-webportal/blob/master/setup-scripts/README.md"
target="_blank"
rel="noopener noreferrer"
>
Portal Setup
</a>
</li>
<li>
<a
href="https://support.siasky.net/article/vmmzyes1uy-skynet-sia-set-up"
target="_blank"
rel="noopener noreferrer"
>
Sia Node Setup
</a>
</li>
</ul>
</Fade>
</div>
<div className="footer-column">
<Fade duration={700} distance="40px" bottom>
<h2>Social</h2>
<ul>
<li>
<a href="https://twitter.com/siatechhq" target="_blank" rel="noopener noreferrer">
Twitter
</a>
</li>
<li>
<a href="https://discord.gg/sia" target="_blank" rel="noopener noreferrer">
Discord
</a>
</li>
<li>
<a href="https://www.reddit.com/r/siacoin" target="_blank" rel="noopener noreferrer">
Reddit
</a>
</li>
<li>
<a href="https://blog.sia.tech" target="_blank" rel="noopener noreferrer">
Blog
</a>
</li>
</ul>
</Fade>
</div>
<div className="footer-column">
<Fade duration={700} distance="40px" bottom>
<h2>Links</h2>
<ul>
<li>
<a href="https://sia.tech/" target="_blank" rel="noopener noreferrer">
Sia.tech
</a>
</li>
<li>
<a href="https://jobs.lever.co/nebulous" target="_blank" rel="noopener noreferrer">
Jobs
</a>
</li>
<li>
<a href="https://support.siasky.net" target="_blank" rel="noopener noreferrer">
Support
</a>
</li>
<li>
<a href="terms.pdf" target="_blank" rel="noopener noreferrer">
Terms
</a>
</li>
<li>
<a href="privacy.pdf" target="_blank" rel="noopener noreferrer">
Privacy
</a>
</li>
</ul>
</Fade>
</div>
<div className="footer-column">
<Fade duration={700} distance="40px" bottom>
<h2>Stay up to date with Skynet updates</h2>
<Mailing id="mailing-bottom" light />
</Fade>
</div>
<footer className="footer" id="footer">
<div className="width">
<div className="footer-column">
<Built width={120} height={120} preserveAspectRatio={"xMinYMin"} />
</div>
<FooterCube className="footer-cube fadeInUp delay2" />
<FooterOrb className="footer-orb fadeInUp delay2" />
</footer>
</Reveal>
<div className="footer-column">
<h2>Skynet Webportals</h2>
<ul>
<li>
<a href="https://skydrain.net" target="_blank" rel="noopener noreferrer">
skydrain.net
</a>
</li>
<li>
<a href="https://sialoop.net" target="_blank" rel="noopener noreferrer">
sialoop.net
</a>
</li>
<li>
<a href="https://skynet.luxor.tech" target="_blank" rel="noopener noreferrer">
skynet.luxor.tech
</a>
</li>
<li>
<a href="https://skynet.tutemwesi.com" target="_blank" rel="noopener noreferrer">
skynet.tutemwesi.com
</a>
</li>
<li>
<a href="https://siacdn.com" target="_blank" rel="noopener noreferrer">
siacdn.com
</a>
</li>
<li>
<a href="https://vault.lightspeedhosting.com" target="_blank" rel="noopener noreferrer">
vault.lightspeedhosting.com
</a>
</li>
</ul>
</div>
<div className="footer-column">
<h2>For Developers</h2>
<ul>
<li>
<a href="https://blog.sia.tech/skynet-bdf0209d6d34" target="_blank" rel="noopener noreferrer">
Skynet Overview
</a>
</li>
<li>
<a href="https://sia.tech/docs/#skynet" target="_blank" rel="noopener noreferrer">
API Docs
</a>
</li>
<li>
<a
href="https://github.com/NebulousLabs/skynet-webportal/blob/master/setup-scripts/README.md"
target="_blank"
rel="noopener noreferrer"
>
Portal Setup
</a>
</li>
<li>
<a
href="https://support.siasky.net/article/vmmzyes1uy-skynet-sia-set-up"
target="_blank"
rel="noopener noreferrer"
>
Sia Node Setup
</a>
</li>
</ul>
</div>
<div className="footer-column">
<h2>Social</h2>
<ul>
<li>
<a href="https://twitter.com/siatechhq" target="_blank" rel="noopener noreferrer">
Twitter
</a>
</li>
<li>
<a href="https://discord.gg/sia" target="_blank" rel="noopener noreferrer">
Discord
</a>
</li>
<li>
<a href="https://www.reddit.com/r/siacoin" target="_blank" rel="noopener noreferrer">
Reddit
</a>
</li>
<li>
<a href="https://blog.sia.tech" target="_blank" rel="noopener noreferrer">
Blog
</a>
</li>
</ul>
</div>
<div className="footer-column">
<h2>Links</h2>
<ul>
<li>
<a href="https://sia.tech/" target="_blank" rel="noopener noreferrer">
Sia.tech
</a>
</li>
<li>
<a href="https://jobs.lever.co/nebulous" target="_blank" rel="noopener noreferrer">
Jobs
</a>
</li>
<li>
<a href="https://support.siasky.net" target="_blank" rel="noopener noreferrer">
Support
</a>
</li>
<li>
<a href="terms.pdf" target="_blank" rel="noopener noreferrer">
Terms
</a>
</li>
<li>
<a href="privacy.pdf" target="_blank" rel="noopener noreferrer">
Privacy
</a>
</li>
</ul>
</div>
<div className="footer-column">
<h2>Stay up to date with Skynet updates</h2>
<Mailing id="mailing-bottom" light />
</div>
</div>
<FooterCube className="footer-cube" />
<FooterOrb className="footer-orb" />
</footer>
);
}

41
packages/webapp/src/components/HomeBuilt/HomeBuilt.js
View File

@ -1,5 +1,4 @@
import React from "react";
import Fade from "react-reveal/Fade";
import "./HomeBuilt.scss";
import { CircleIcon, CodeExamples } from "../";
@ -9,31 +8,25 @@ export default function HomeBuilt() {
return (
<div className="home-built">
<header className="home-built-header">
<Fade duration={700} distance="40px" bottom>
<div className="home-built-divider">
<div className="small-divider" />
<div className="divider" />
<SmallOrb className="small-orb" />
<CircleIcon>
<Cylinder />
</CircleIcon>
<SmallOrb className="small-orb" />
<div className="divider" />
<div className="small-divider" />
</div>
</Fade>
<Fade duration={700} distance="40px" bottom>
<h2>
Infrastructure built for
<br />
<strong>application developers</strong>
</h2>
</Fade>
<div className="home-built-divider">
<div className="small-divider" />
<div className="divider" />
<SmallOrb className="small-orb" />
<CircleIcon>
<Cylinder />
</CircleIcon>
<SmallOrb className="small-orb" />
<div className="divider" />
<div className="small-divider" />
</div>
<h2>
Infrastructure built for
<br />
<strong>application developers</strong>
</h2>
</header>
<Fade duration={700} distance="40px" bottom>
<CodeExamples />
</Fade>
<CodeExamples />
</div>
);
}

234
packages/webapp/src/components/HomeNetwork/HomeNetwork.js
View File

@ -2,7 +2,6 @@ import React, { useState } from "react";
import PropTypes from "prop-types";
import CountUp from "react-countup";
import VisibilitySensor from "react-visibility-sensor";
import Fade from "react-reveal/Fade";
import useStats, { AVAILABLE_STATS } from "./useStats";
import "./HomeNetwork.scss";
@ -29,147 +28,126 @@ export default function HomeNetwork() {
return (
<div className="home-network">
<header className="home-network-header">
<Fade duration={700} distance="40px" bottom>
<div className="home-network-divider">
<CircleIcon>
<LogoSolid />
</CircleIcon>
<SmallOrb />
<div className="divider"></div>
<div className="small-divider"></div>
</div>
</Fade>
<Fade duration={700} distance="40px" bottom>
<h2>
Sia
<br />
<strong>Network</strong>
</h2>
</Fade>
<div className="home-network-divider">
<CircleIcon>
<LogoSolid />
</CircleIcon>
<SmallOrb />
<div className="divider"></div>
<div className="small-divider"></div>
</div>
<h2>
Sia
<br />
<strong>Network</strong>
</h2>
</header>
<Fade duration={700} distance="40px" bottom>
<VisibilitySensor onChange={onChange} partialVisibility offset={{ bottom: 100 }} scrollThrottle={50}>
<React.Fragment>
<div className="home-network-stats">
{STATS_MAP.map((stat, i) => (
<React.Fragment key={i}>
<div key={i} className="home-network-stat">
<div className="inner">
{visible && <StatValue stat={stat} value={stats[stat.key]} />}
<span className="network-stat-name">{stat.name}</span>
</div>
<VisibilitySensor onChange={onChange} partialVisibility offset={{ bottom: 100 }} scrollThrottle={50}>
<React.Fragment>
<div className="home-network-stats">
{STATS_MAP.map((stat, i) => (
<React.Fragment key={i}>
<div key={i} className="home-network-stat">
<div className="inner">
{visible && <StatValue stat={stat} value={stats[stat.key]} />}
<span className="network-stat-name">{stat.name}</span>
</div>
{i !== 4 && <div className="divider" />}
</React.Fragment>
))}
<Deco6 className="deco-6" />
<Deco7 className="deco-7" />
<Deco8 className="deco-8" />
</div>
<div className="home-network-stats-provider">
stats provided by{" "}
<a href="https://siastats.info" target="_blank" rel="noopener noreferrer">
siastats.info
</a>
</div>
</React.Fragment>
</VisibilitySensor>
</Fade>
</div>
{i !== 4 && <div className="divider" />}
</React.Fragment>
))}
<Deco6 className="deco-6" />
<Deco7 className="deco-7" />
<Deco8 className="deco-8" />
</div>
<div className="home-network-stats-provider">
stats provided by{" "}
<a href="https://siastats.info" target="_blank" rel="noopener noreferrer">
siastats.info
</a>
</div>
</React.Fragment>
</VisibilitySensor>
<div className="home-network-columns">
<div className="home-network-column left">
<Fade duration={700} distance="40px" bottom>
<p>
<strong>Skynet Webportals</strong> are low cost servers that sit between Skynet and everyday users,
enabling them to access Skynet content without needing to operate any special software. As Skylinks are
generated, they can be shared with anyone to retrieve data from any Webportal. The original uploader does
not need to stay online in order for the file to remain available. The Sia network serves as the backend
storage layer for Skynet and handles all of the pinning, guaranteeing both high speeds and excellent
uptime.
</p>
</Fade>
<p>
<strong>Skynet Webportals</strong> are low cost servers that sit between Skynet and everyday users, enabling
them to access Skynet content without needing to operate any special software. As Skylinks are generated,
they can be shared with anyone to retrieve data from any Webportal. The original uploader does not need to
stay online in order for the file to remain available. The Sia network serves as the backend storage layer
for Skynet and handles all of the pinning, guaranteeing both high speeds and excellent uptime.
</p>
<Fade duration={700} distance="40px" bottom>
<p>
<strong>Sia</strong> is the leading decentralized cloud storage platform. No signups, no servers, no
trusted third parties. Sia leverages blockchain technology to create a data storage marketplace that is
more robust and more affordable than traditional cloud storage providers.
</p>
<p>
<strong>Sia</strong> is the leading decentralized cloud storage platform. No signups, no servers, no trusted
third parties. Sia leverages blockchain technology to create a data storage marketplace that is more robust
and more affordable than traditional cloud storage providers.
</p>
<p>
<a className="more" href="https://sia.tech/" target="_blank" rel="noopener noreferrer">
Learn more about Sia
</a>
</p>
</Fade>
<p>
<a className="more" href="https://sia.tech/" target="_blank" rel="noopener noreferrer">
Learn more about Sia
</a>
</p>
</div>
<div className="home-network-column">
<Fade duration={700} distance="40px" bottom>
<FAQ title="How do I use Skynet?">
<p>
Anyone can access files that have been uploaded to Skynet as long as they possess the corresponding
Skylinks. You can use any Webportal to download files!
<a
href="https://skynet.helpdocs.io/article/3p9z5g9s0e-skynet-how-to"
target="_blank"
rel="noopener noreferrer"
className="more read-more"
>
read more
</a>
</p>
</FAQ>
</Fade>
<FAQ title="How do I use Skynet?">
<p>
Anyone can access files that have been uploaded to Skynet as long as they possess the corresponding
Skylinks. You can use any Webportal to download files!
<a
href="https://skynet.helpdocs.io/article/3p9z5g9s0e-skynet-how-to"
target="_blank"
rel="noopener noreferrer"
className="more read-more"
>
read more
</a>
</p>
</FAQ>
<Fade duration={700} distance="40px" bottom>
<FAQ title="How do I integrate Skynet into my app?">
<p>
Applications can be deployed in under a minute and be immediately available globally. Skynet includes an
API and SDKs which integrate seamlessly with existing applications.
<a
href="https://skynet.helpdocs.io/article/hrshqsn9wz-integrating-skynet"
target="_blank"
rel="noopener noreferrer"
className="more read-more"
>
read more
</a>
</p>
</FAQ>
</Fade>
<FAQ title="How do I integrate Skynet into my app?">
<p>
Applications can be deployed in under a minute and be immediately available globally. Skynet includes an
API and SDKs which integrate seamlessly with existing applications.
<a
href="https://skynet.helpdocs.io/article/hrshqsn9wz-integrating-skynet"
target="_blank"
rel="noopener noreferrer"
className="more read-more"
>
read more
</a>
</p>
</FAQ>
<Fade duration={700} distance="40px" bottom>
<FAQ title="How fast is Skynet?">
<p>
Skynet&apos;s speeds rival centralized providers and surpass all decentralized offerings. A typical
Skynet download starts in under 500 ms and can stream at rates as high as 1 Gbps!
<a
href="https://skynet.helpdocs.io/article/430teoxgqc-skynet-speed"
target="_blank"
rel="noopener noreferrer"
className="more read-more"
>
read more
</a>
</p>
</FAQ>
</Fade>
<FAQ title="How fast is Skynet?">
<p>
Skynet&apos;s speeds rival centralized providers and surpass all decentralized offerings. A typical Skynet
download starts in under 500 ms and can stream at rates as high as 1 Gbps!
<a
href="https://skynet.helpdocs.io/article/430teoxgqc-skynet-speed"
target="_blank"
rel="noopener noreferrer"
className="more read-more"
>
read more
</a>
</p>
</FAQ>
<Fade duration={700} distance="40px" bottom>
<FAQ title="How much does it cost to run a Webportal?">
<p>
Storage costs 10x lower than centralized providers and bandwidth costs are 100x lower – without
sacrificing performance or reliability.
</p>
</FAQ>
</Fade>
<FAQ title="How much does it cost to run a Webportal?">
<p>
Storage costs 10x lower than centralized providers and bandwidth costs are 100x lower – without
sacrificing performance or reliability.
</p>
</FAQ>
<Fade duration={700} distance="40px" bottom>
<a className="more more-faq" href="https://support.siasky.net" target="_blank" rel="noopener noreferrer">
View more FAQ
</a>
</Fade>
<a className="more more-faq" href="https://support.siasky.net" target="_blank" rel="noopener noreferrer">
View more FAQ
</a>
</div>
</div>
</div>

76
packages/webapp/src/components/HomeSamples/HomeSamples.js
View File

@ -1,6 +1,4 @@
import React from "react";
import Fade from "react-reveal/Fade";
import Reveal from "react-reveal/Reveal";
import "./HomeSamples.scss";
import { Sample } from "../";
@ -18,51 +16,37 @@ const samples = [
export default function HomeSamples() {
return (
<div className="home-samples">
<Fade duration={700} distance="40px" bottom>
<p>Above are some code snippets for uploading and retrieving data.</p>
<p>
Skynet includes{" "}
<a
href="https://nebulouslabs.github.io/skynet-docs"
target="_blank"
rel="noopener noreferrer"
className="link"
>
SDKs
</a>{" "}
for popular programming languages and{" "}
<a href="https://sia.tech/docs/#skynet" target="_blank" rel="noopener noreferrer" className="link">
APIs
</a>{" "}
that integrate seamlessly with your existing apps. You can follow these guides to start using Skynet with{" "}
<a
href="https://github.com/NebulousLabs/skynet-cli"
target="_blank"
rel="noopener noreferrer"
className="link"
>
the Skynet CLI
</a>{" "}
and{" "}
<a
href="https://blog.sia.tech/the-skynet-sdks-751b35578b20"
target="_blank"
rel="noopener noreferrer"
className="link"
>
integrate Skynet
</a>{" "}
into your application.
</p>
</Fade>
<p>Above are some code snippets for uploading and retrieving data.</p>
<p>
Skynet includes{" "}
<a href="https://nebulouslabs.github.io/skynet-docs" target="_blank" rel="noopener noreferrer" className="link">
SDKs
</a>{" "}
for popular programming languages and{" "}
<a href="https://sia.tech/docs/#skynet" target="_blank" rel="noopener noreferrer" className="link">
APIs
</a>{" "}
that integrate seamlessly with your existing apps. You can follow these guides to start using Skynet with{" "}
<a href="https://github.com/NebulousLabs/skynet-cli" target="_blank" rel="noopener noreferrer" className="link">
the Skynet CLI
</a>{" "}
and{" "}
<a
href="https://blog.sia.tech/the-skynet-sdks-751b35578b20"
target="_blank"
rel="noopener noreferrer"
className="link"
>
integrate Skynet
</a>{" "}
into your application.
</p>
<Reveal effect="active">
<div className="home-samples-samples">
{samples.map((sample, i) => (
<Sample className={`fadeInUp delay${i + 1}`} key={`${i}-${sample.url}`} {...sample} />
))}
</div>
</Reveal>
<div className="home-samples-samples">
{samples.map((sample, i) => (
<Sample key={`${i}-${sample.url}`} {...sample} />
))}
</div>
</div>
);
}

89
packages/webapp/src/components/HomeStay/HomeStay.js
View File

@ -1,5 +1,4 @@
import React, { Component } from "react";
import Fade from "react-reveal/Fade";
import "./HomeStay.scss";
import { SocialLink, CircleIcon, Mailing } from "../";
@ -10,65 +9,53 @@ export default class HomeStay extends Component {
return (
<div className="home-stay">
<header className="home-stay-header">
<Fade duration={700} distance="40px" bottom>
<div className="home-stay-divider">
<CircleIcon>
<Pyramid />
</CircleIcon>
<SmallOrb />
<div className="divider" />
<div className="small-divider" />
</div>
</Fade>
<div className="home-stay-divider">
<CircleIcon>
<Pyramid />
</CircleIcon>
<SmallOrb />
<div className="divider" />
<div className="small-divider" />
</div>
</header>
<div className="home-stay-flex">
<div className="home-stay-left">
<header className="home-stay-header">
<Fade duration={700} distance="40px" bottom>
<h2>
Stay up to date with
<br />
<strong>Skynet updates</strong>
</h2>
</Fade>
<h2>
Stay up to date with
<br />
<strong>Skynet updates</strong>
</h2>
</header>
<Fade duration={700} distance="40px" bottom>
<Mailing id="mailing-top" />
</Fade>
<Mailing id="mailing-top" />
</div>
<ul className="home-stay-right">
<Fade duration={700} distance="40px" bottom>
<li>
<SocialLink
icon="github"
url="https://github.com/NebulousLabs/skynet-webportal"
greenText="View project on Github"
title={<strong>/Skynet-Webportal</strong>}
/>
</li>
</Fade>
<Fade duration={700} distance="40px" bottom>
<li>
<SocialLink
icon="discord"
url="https://discord.gg/sia"
greenText="View project on Discord"
title={<strong>/Sia</strong>}
/>
</li>
</Fade>
<Fade duration={700} distance="40px" bottom>
<li>
<SocialLink
icon="twitter"
url="https://twitter.com/SiaTechHQ"
greenText="View project on Twitter"
title={<strong>@SiaTechHQ</strong>}
/>
</li>
</Fade>
<li>
<SocialLink
icon="github"
url="https://github.com/NebulousLabs/skynet-webportal"
greenText="View project on Github"
title={<strong>/Skynet-Webportal</strong>}
/>
</li>
<li>
<SocialLink
icon="discord"
url="https://discord.gg/sia"
greenText="View project on Discord"
title={<strong>/Sia</strong>}
/>
</li>
<li>
<SocialLink
icon="twitter"
url="https://twitter.com/SiaTechHQ"
greenText="View project on Twitter"
title={<strong>@SiaTechHQ</strong>}
/>
</li>
</ul>
</div>
</div>

24
packages/webapp/src/components/HomeTop/HomeTop.js
View File

@ -1,26 +1,22 @@
import React from "react";
import Reveal from "react-reveal/Reveal";
import logo from "../../images/logo.svg";
import "./HomeTop.scss";
import { Skynet, Deco1, Deco2 } from "../../svg";
export default function HomeTop() {
return (
<Reveal effect="active">
<div className="home-top">
<img src={logo} alt="Skynet logo" className="logo" />
<Skynet className="wordmark" />
<div className="home-top">
<img src={logo} alt="Skynet logo" className="logo" />
<Skynet className="wordmark" />
<h1 className="fadeInUp delay2">Build a Free Internet.</h1>
<h1>Build a Free Internet.</h1>
<p className="fadeInUp delay3">
The decentralized CDN and file sharing platform for devs. Skynet is the storage foundation for a Free
Internet!
</p>
<p>
The decentralized CDN and file sharing platform for devs. Skynet is the storage foundation for a Free Internet!
</p>
<Deco1 className="deco-1 fadeInUp delay6" />
<Deco2 className="deco-2 fadeInUp delay6" />
</div>
</Reveal>
<Deco1 className="deco-1" />
<Deco2 className="deco-2" />
</div>
);
}

13
packages/webapp/src/components/HomeTop/HomeTop.scss
View File

@ -20,19 +20,6 @@
margin: 0 auto 35px;
}
.wordmark,
.logo {
transform: translateY(40px);
opacity: 0;
transition: 1s transform, 1s opacity;
}
&.active .wordmark,
&.active .logo {
transform: none;
opacity: 1;
}
h1 {
font-size: 44px;
line-height: 1.14;

159
packages/webapp/src/components/HomeUpload/HomeUpload.js
View File

@ -4,7 +4,6 @@ import classNames from "classnames";
import { getReasonPhrase, StatusCodes } from "http-status-codes";
import path from "path-browserify";
import { useDropzone } from "react-dropzone";
import Reveal from "react-reveal/Reveal";
import { Button, UploadFile } from "../";
import { Deco3, Deco4, Deco5, Folder, DownArrow } from "../../svg";
import "./HomeUpload.scss";
@ -159,93 +158,91 @@ export default function HomeUpload() {
};
return (
<Reveal effect="active">
<div className="home-upload">
<div className="home-upload-white fadeInUp delay4">
<div className="home-upload-split">
<div className="home-upload-box ">
<div
className={classNames("home-upload-dropzone", {
"drop-active": isDragActive,
})}
{...getRootProps()}
>
<span className="home-upload-text">
<h3>Upload your {directoryMode ? "Directory" : "Files"}</h3>
Drop your {directoryMode ? "directory" : "files"} here to pin to Skynet
</span>
<Button iconLeft>
<Folder />
Browse
</Button>
</div>
<input {...getInputProps()} className="offscreen" />
<button
type="button"
className="home-upload-mode-switch link"
onClick={() => setDirectoryMode(!directoryMode)}
>
{directoryMode ? "⇐ Switch back to uploading files" : "Do you want to upload entire directory?"}
</button>
{directoryMode && (
<p className="home-upload-directory-mode-notice">
Please note that directory upload is not a standard browser feature and the browser support is
limited. To check whether your browser is compatible, visit{" "}
<a
href="https://caniuse.com/#feat=mdn-api_htmlinputelement_webkitdirectory"
target="_blank"
rel="noopener noreferrer"
className="link"
>
caniuse.com
</a>
.
</p>
)}
<div className="home-upload">
<div className="home-upload-white">
<div className="home-upload-split">
<div className="home-upload-box ">
<div
className={classNames("home-upload-dropzone", {
"drop-active": isDragActive,
})}
{...getRootProps()}
>
<span className="home-upload-text">
<h3>Upload your {directoryMode ? "Directory" : "Files"}</h3>
Drop your {directoryMode ? "directory" : "files"} here to pin to Skynet
</span>
<Button iconLeft>
<Folder />
Browse
</Button>
</div>
<div className="home-upload-retrieve">
<div className="home-upload-text">
<h3 id="skylink-retrieve-title">Have a Skylink?</h3>
<p>Paste the link to retrieve your file</p>
<form
className={classNames("home-upload-retrieve-form", { invalid: skylink && !isValidSkylink(skylink) })}
onSubmit={handleSkylink}
<input {...getInputProps()} className="offscreen" />
<button
type="button"
className="home-upload-mode-switch link"
onClick={() => setDirectoryMode(!directoryMode)}
>
{directoryMode ? "⇐ Switch back to uploading files" : "Do you want to upload entire directory?"}
</button>
{directoryMode && (
<p className="home-upload-directory-mode-notice">
Please note that directory upload is not a standard browser feature and the browser support is limited.
To check whether your browser is compatible, visit{" "}
<a
href="https://caniuse.com/#feat=mdn-api_htmlinputelement_webkitdirectory"
target="_blank"
rel="noopener noreferrer"
className="link"
>
<input
name="skylink"
type="text"
placeholder="sia://"
aria-labelledby="skylink-retrieve-title"
onChange={(event) => setSkylink(event.target.value)}
/>
<button type="submit" aria-label="Retrieve file">
<DownArrow />
</button>
</form>
</div>
</div>
caniuse.com
</a>
.
</p>
)}
</div>
{files.length > 0 && (
<div className="home-uploaded-files">
{files.map((file, i) => {
return <UploadFile key={i} {...file} />;
})}
<div className="home-upload-retrieve">
<div className="home-upload-text">
<h3 id="skylink-retrieve-title">Have a Skylink?</h3>
<p>Paste the link to retrieve your file</p>
<form
className={classNames("home-upload-retrieve-form", { invalid: skylink && !isValidSkylink(skylink) })}
onSubmit={handleSkylink}
>
<input
name="skylink"
type="text"
placeholder="sia://"
aria-labelledby="skylink-retrieve-title"
onChange={(event) => setSkylink(event.target.value)}
/>
<button type="submit" aria-label="Retrieve file">
<DownArrow />
</button>
</form>
</div>
)}
</div>
</div>
<p className="bottom-text fadeInUp delay5">
Upon uploading a file, Skynet generates a 46 byte link called a <strong>Skylink</strong>. This link can then
be shared with anyone to retrieve the file on any Skynet Webportal.
</p>
<Deco3 className="deco-3 fadeInUp delay6" />
<Deco4 className="deco-4 fadeInUp delay6" />
<Deco5 className="deco-5 fadeInUp delay6" />
{files.length > 0 && (
<div className="home-uploaded-files">
{files.map((file, i) => {
return <UploadFile key={i} {...file} />;
})}
</div>
)}
</div>
</Reveal>
<p className="bottom-text">
Upon uploading a file, Skynet generates a 46 byte link called a <strong>Skylink</strong>. This link can then be
shared with anyone to retrieve the file on any Skynet Webportal.
</p>
<Deco3 className="deco-3" />
<Deco4 className="deco-4" />
<Deco5 className="deco-5" />
</div>
);
}

4
packages/webapp/src/components/HomeUpload/HomeUpload.scss
View File

@ -17,14 +17,10 @@
}
.home-upload-white {
transition: 0.2s background-color, 0.2s border, 0.2s color;
background: $white;
border-radius: 12px;
box-shadow: 0 8px 24px 0 rgba(90, 94, 91, 0.15), 0 2px 4px 0 rgba(0, 0, 0, 0.05);
padding: 16px;
opacity: 0;
transform: translateY(40px);
transition: 0.7s opacity, 0.7s transform;
}
.home-upload-split {

63
packages/webapp/src/global.scss
View File

@ -146,66 +146,3 @@ svg {
transform: translate(0, 0);
}
}
.fadeInUp {
transform: translateY(40px);
opacity: 0;
transition: 0.7s opacity, 0.7s transform;
.active & {
opacity: 1;
transform: none;
}
&.delay2 {
transition-delay: 0.2s;
}
&.delay3 {
transition-delay: 0.3s;
}
&.delay4 {
transition-delay: 0.4s;
}
&.delay5 {
transition-delay: 0.5s;
}
&.delay6 {
transition-delay: 0.6s;
}
&.delay7 {
transition-delay: 0.7s;
}
&.delay8 {
transition-delay: 0.8s;
}
&.delay9 {
transition-delay: 0.9s;
}
&.delay10 {
transition-delay: 1s;
}
&.delay11 {
transition-delay: 1.1s;
}
&.delay12 {
transition-delay: 1.2s;
}
&.delay13 {
transition-delay: 1.3s;
}
&.delay14 {
transition-delay: 1.4s;
}
}

90
yarn.lock
View File

@ -2955,10 +2955,10 @@ babel-plugin-remove-export-keywords@^1.6.5:
resolved "https://registry.yarnpkg.com/babel-plugin-remove-export-keywords/-/babel-plugin-remove-export-keywords-1.6.16.tgz#e764b42e3c8e4a5ce3e2c996dc43b6348d5d94cf"
integrity sha512-JrB9ZASlMAfkRF+5NdgoQxgenhJxzXFEO1vrqsSDJdzLrC38L2wrvXF9mm1YLbrehkZxcrNz9UYDyARP4jaY9g==
babel-plugin-remove-graphql-queries@^2.9.17:
version "2.9.17"
resolved "https://registry.yarnpkg.com/babel-plugin-remove-graphql-queries/-/babel-plugin-remove-graphql-queries-2.9.17.tgz#f66c421a58392ddca8b2f06473ca0eb2c4ec632d"
integrity sha512-ThFGZlxD+U4H+aSX4DRpz7pdJq6Y7wob0rDDx7Q2rZPp9lbNfnGACUjPyTiCIy8EsBMpPYvT4WZjb4Gd0Xq6zQ==
babel-plugin-remove-graphql-queries@^2.9.18:
version "2.9.18"
resolved "https://registry.yarnpkg.com/babel-plugin-remove-graphql-queries/-/babel-plugin-remove-graphql-queries-2.9.18.tgz#0c62490f44ec61bc6cf1b2d4aca0315007e9180b"
integrity sha512-7lr9taus0LfqQuHQFytwrxdd2aMw/GBllyNzl+DWJ9Zg2LwCxlzELtqiy7h7xjTj16fX9+oNXgiJy7Xeo1UN/A==
babel-plugin-syntax-jsx@^6.18.0:
version "6.18.0"
@ -6689,7 +6689,7 @@ functional-red-black-tree@^1.0.1:
resolved "https://registry.yarnpkg.com/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327"
integrity sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=
gatsby-cli@^2.12.92:
gatsby-cli@^2.12.95:
version "2.12.95"
resolved "https://registry.yarnpkg.com/gatsby-cli/-/gatsby-cli-2.12.95.tgz#747db9df11701fd9990676b2c47056467f26f015"
integrity sha512-gSJ6J1i8bJq0dPRmAcfAv9U99knaccyBDopf8ft6+/SrUU9cNahQy0rZN1ksKCILjTpLRGKTH1pYN2PE3efjuw==
@ -6835,7 +6835,7 @@ gatsby-plugin-matomo@0.8.3:
resolved "https://registry.yarnpkg.com/gatsby-plugin-matomo/-/gatsby-plugin-matomo-0.8.3.tgz#e0e9cc9e60f7e4b157c9964dfc9d444d73bc46ee"
integrity sha512-fv6TgD+WsxziZrtmz6sNF4m9FgSyV+8y3R1sobA5hB5OxJyhs/Y4HVo9jCPRHu5VLKQsg4i7LJhWL0ocJiqEWQ==
gatsby-plugin-page-creator@^2.3.26:
gatsby-plugin-page-creator@^2.3.27:
version "2.3.27"
resolved "https://registry.yarnpkg.com/gatsby-plugin-page-creator/-/gatsby-plugin-page-creator-2.3.27.tgz#b3211eb8975c7e943dcd560f500a88462af013e8"
integrity sha512-Yo/2uneVngKQ/tpzloMkbn0TIci8GAbdNjU5+Q8UChzAAXlgrROrB46zPJkLA8sbA9Y2xCfGBWMY+DLt6blxHQ==
@ -6877,10 +6877,10 @@ gatsby-plugin-sass@2.3.12:
"@babel/runtime" "^7.10.3"
sass-loader "^7.3.1"
gatsby-plugin-sharp@2.6.33:
version "2.6.33"
resolved "https://registry.yarnpkg.com/gatsby-plugin-sharp/-/gatsby-plugin-sharp-2.6.33.tgz#4f951874d7666a2c3121e39ac226432184d5c9da"
integrity sha512-B0Fbn2FJhOsNc/0xbSTCsUldhTcOZZfVEOsjSKT63n3x9eXNlRnIi/ofwexbSzp+eRyCPMcMD9ufzVHczpEpvA==
gatsby-plugin-sharp@2.6.35:
version "2.6.35"
resolved "https://registry.yarnpkg.com/gatsby-plugin-sharp/-/gatsby-plugin-sharp-2.6.35.tgz#d37e08f453784e39d7b1c2a759b801fdd4e633c4"
integrity sha512-5y2ut8TGg5iIfDMnVm/WRy37vjSlHzMdJVugvB4lp4NH69FIq75JpaivshtjQYEi3cc5UonXOQWZJ6aSsM54pQ==
dependencies:
"@babel/runtime" "^7.10.3"
async "^3.2.0"
@ -6890,7 +6890,7 @@ gatsby-plugin-sharp@2.6.33:
got "^10.7.0"
imagemin "^7.0.1"
imagemin-mozjpeg "^9.0.0"
imagemin-pngquant "^9.0.0"
imagemin-pngquant "^9.0.1"
lodash "^4.17.19"
mini-svg-data-uri "^1.2.3"
potrace "^2.1.8"
@ -6901,10 +6901,10 @@ gatsby-plugin-sharp@2.6.33:
svgo "1.3.2"
uuid "3.4.0"
gatsby-plugin-typescript@^2.4.18:
version "2.4.18"
resolved "https://registry.yarnpkg.com/gatsby-plugin-typescript/-/gatsby-plugin-typescript-2.4.18.tgz#9361ef69f149f68e55ebf2d3f773b9aafce75df8"
integrity sha512-irFd9xu+LjEmL7olcuUziVSb2yRf0nVWFwgaDb+l5rfU6HeKr3zyHuxLqBMwvXWTxu6gVs8sAJVXCcxxM4DbeA==
gatsby-plugin-typescript@^2.4.19:
version "2.4.19"
resolved "https://registry.yarnpkg.com/gatsby-plugin-typescript/-/gatsby-plugin-typescript-2.4.19.tgz#ae644cf973e07b6266da17bb47dae0e0bfaeeb23"
integrity sha512-DMKmTxJZz8qsDvesAt1PJm43pgEe83Kv90TDL5tZ5tqQ0XwwgADHG9p0yPJSqmc1xRtsChaDGnSpnRdUC2Oi3Q==
dependencies:
"@babel/core" "^7.10.3"
"@babel/plugin-proposal-nullish-coalescing-operator" "^7.10.1"
@ -6912,7 +6912,7 @@ gatsby-plugin-typescript@^2.4.18:
"@babel/plugin-proposal-optional-chaining" "^7.10.3"
"@babel/preset-typescript" "^7.10.1"
"@babel/runtime" "^7.10.3"
babel-plugin-remove-graphql-queries "^2.9.17"
babel-plugin-remove-graphql-queries "^2.9.18"
gatsby-react-router-scroll@^3.0.12:
version "3.0.12"
@ -7011,10 +7011,10 @@ gatsby-recipes@^0.2.24:
yoga-layout-prebuilt "^1.9.6"
yup "^0.27.0"
gatsby-source-filesystem@2.3.28:
version "2.3.28"
resolved "https://registry.yarnpkg.com/gatsby-source-filesystem/-/gatsby-source-filesystem-2.3.28.tgz#cd1857bf450d270a5f6068ef4dcacb27b9e6a611"
integrity sha512-cFsEcEfPkcLP3tx0/sy6F6E52+yj4xfQnYMgEFKcUdEUNNHjyTsdP9eYkzHxoDbYm9Ycwjs92Vd52C+6/Ii56w==
gatsby-source-filesystem@2.3.29:
version "2.3.29"
resolved "https://registry.yarnpkg.com/gatsby-source-filesystem/-/gatsby-source-filesystem-2.3.29.tgz#5eaf1434593f38523655145323e426f21c30687a"
integrity sha512-PWHtkj+inhfPm8aMVhtxS1PAW+r4Kk5M1LDP5l0OO2HBaHiiSi0DulgmYJ3usYpctFqOQ92im/EQLRJbOaaQsA==
dependencies:
"@babel/runtime" "^7.10.3"
better-queue "^3.8.10"
@ -7032,7 +7032,7 @@ gatsby-source-filesystem@2.3.28:
valid-url "^1.0.9"
xstate "^4.11.0"
gatsby-telemetry@^1.3.31, gatsby-telemetry@^1.3.32:
gatsby-telemetry@^1.3.32:
version "1.3.32"
resolved "https://registry.yarnpkg.com/gatsby-telemetry/-/gatsby-telemetry-1.3.32.tgz#aaf8b038cb7d3e93cf6e1df5c1ed1fe037c9e9bd"
integrity sha512-iKX6PJNdcXH7z2epyRTKCkp6fYCN3ePE5tpkbckaw9BLj5S4EZnocALPC4lhFefu3PatY6cXc1WAOMO9AwqrtA==
@ -7066,10 +7066,10 @@ gatsby-transformer-sharp@2.5.14:
semver "^7.3.2"
sharp "^0.25.4"
gatsby@2.24.54:
version "2.24.54"
resolved "https://registry.yarnpkg.com/gatsby/-/gatsby-2.24.54.tgz#e0ae227831946b4ca3a457614e57ea38aa80e8d6"
integrity sha512-RDQn2OCjwHNvXhlTJ2F7v3p294/yzpk0yt6vXomhuKq7Dkcf14tZcPkLfrODcbEBg8RcD1IyrFvjQDs8/NI2Cg==
gatsby@2.24.57:
version "2.24.57"
resolved "https://registry.yarnpkg.com/gatsby/-/gatsby-2.24.57.tgz#4db5fa313291c92f68f28d005c13e5e37381b9ee"
integrity sha512-5xTifqE39T3HCTa5eeexHUXq4lhfEq+wKnJoFnjuM52o+fIfz09QRcFJE5QVGJpdxcRAHuQLrkb5cR8DafFEpg==
dependencies:
"@babel/code-frame" "^7.10.3"
"@babel/core" "^7.10.3"
@ -7093,7 +7093,7 @@ gatsby@2.24.54:
babel-loader "^8.1.0"
babel-plugin-add-module-exports "^0.3.3"
babel-plugin-dynamic-import-node "^2.3.3"
babel-plugin-remove-graphql-queries "^2.9.17"
babel-plugin-remove-graphql-queries "^2.9.18"
babel-preset-gatsby "^0.5.9"
better-opn "1.0.0"
better-queue "^3.8.10"
@ -7134,15 +7134,15 @@ gatsby@2.24.54:
find-cache-dir "^3.3.1"
fs-exists-cached "1.0.0"
fs-extra "^8.1.0"
gatsby-cli "^2.12.92"
gatsby-cli "^2.12.95"
gatsby-core-utils "^1.3.19"
gatsby-graphiql-explorer "^0.4.13"
gatsby-legacy-polyfills "^0.0.4"
gatsby-link "^2.4.13"
gatsby-plugin-page-creator "^2.3.26"
gatsby-plugin-typescript "^2.4.18"
gatsby-plugin-page-creator "^2.3.27"
gatsby-plugin-typescript "^2.4.19"
gatsby-react-router-scroll "^3.0.12"
gatsby-telemetry "^1.3.31"
gatsby-telemetry "^1.3.32"
glob "^7.1.6"
got "8.3.2"
graphql "^14.6.0"
@ -7204,7 +7204,7 @@ gatsby@2.24.54:
type-of "^2.0.1"
url-loader "^1.1.2"
util.promisify "^1.0.1"
uuid "^8.3.0"
uuid "3.4.0"
v8-compile-cache "^1.1.2"
webpack "^4.44.1"
webpack-dev-middleware "^3.7.2"
@ -8188,10 +8188,10 @@ imagemin-mozjpeg@^9.0.0:
is-jpg "^2.0.0"
mozjpeg "^7.0.0"
imagemin-pngquant@^9.0.0:
version "9.0.0"
resolved "https://registry.yarnpkg.com/imagemin-pngquant/-/imagemin-pngquant-9.0.0.tgz#f22ba4276cde1799fb15dd475e33984f8607e871"
integrity sha512-9cqnTEaJwAHWUi+8EMTB3NUouWToCWxtL+QnoYr8bfVwuKilHvRVWKsa9lt+0c3aWaGxCAkHs++j8qINvSqomA==
imagemin-pngquant@^9.0.1:
version "9.0.1"
resolved "https://registry.yarnpkg.com/imagemin-pngquant/-/imagemin-pngquant-9.0.1.tgz#ecf22f522bdb734a503ecc21bdd7bc3d0230edcc"
integrity sha512-PYyo9G/xwddf+Qqlqe3onz5ZH7p6vHYVVkiuuczUjxZmfekyY77RXaOA/AR6FnVoeQxGa/pDtEK5xUKOcVo+sA==
dependencies:
execa "^4.0.0"
is-png "^2.0.0"
@ -12249,10 +12249,10 @@ react-dom@16.13.1:
prop-types "^15.6.2"
scheduler "^0.19.1"
react-dropzone@11.0.3:
version "11.0.3"
resolved "https://registry.yarnpkg.com/react-dropzone/-/react-dropzone-11.0.3.tgz#59c396a1482454fa78466f8565336f40ce7f7c84"
integrity sha512-+MoMOoKZfkZ9i1+qEFl2ZU29AB/c9K2bFxyACqGynguJunmqO+k2PJ2AcuiH51xVNl9R7q/x5QdBaIWb6RtoSw==
react-dropzone@11.1.0:
version "11.1.0"
resolved "https://registry.yarnpkg.com/react-dropzone/-/react-dropzone-11.1.0.tgz#c225f3c53450c80fbd80954361dc039090bfc14c"
integrity sha512-gJT6iJadyTbevrigm6KZFaei/yNWfokzs1idumO7fXtRNPiGFDUpsQ+trHWwUO3yWOtJibpbo5tLZggjm+KV5w==
dependencies:
attr-accept "^2.0.0"
file-selector "^0.1.12"
@ -12386,13 +12386,6 @@ react-remove-scroll@^2.3.0:
use-callback-ref "^1.2.3"
use-sidecar "^1.0.1"
react-reveal@1.2.2:
version "1.2.2"
resolved "https://registry.yarnpkg.com/react-reveal/-/react-reveal-1.2.2.tgz#f47fbc44debc4c185ae2163a215a9e822c7adfef"
integrity sha512-JCv3fAoU6Z+Lcd8U48bwzm4pMZ79qsedSXYwpwt6lJNtj/v5nKJYZZbw3yhaQPPgYePo3Y0NOCoYOq/jcsisuw==
dependencies:
prop-types "^15.5.10"
react-side-effect@^2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/react-side-effect/-/react-side-effect-2.1.0.tgz#1ce4a8b4445168c487ed24dab886421f74d380d3"
@ -15121,11 +15114,6 @@ uuid@3.4.0, uuid@^3.0.0, uuid@^3.0.1, uuid@^3.3.2, uuid@^3.4.0:
resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee"
integrity sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==
uuid@^8.3.0:
version "8.3.0"
resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.0.tgz#ab738085ca22dc9a8c92725e459b1d507df5d6ea"
integrity sha512-fX6Z5o4m6XsXBdli9g7DtWgAx+osMsRRZFKma1mIUsLCz6vRvv+pz5VNbyu9UEDzpMWulZfvpgb/cmDXVulYFQ==
v8-compile-cache@^1.1.2:
version "1.1.2"
resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-1.1.2.tgz#8d32e4f16974654657e676e0e467a348e89b0dc4"