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

Merge pull request #7 from NebulousLabs/final-changes 

final touch
This commit is contained in:
Karol Wypchło 2020-02-14 11:02:56 -05:00 committed by GitHub
parent b4f04e1e63 da4e37c06f
commit 0658296c60
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 118 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/sia-skynet/src/components/CodeExamples/Code.js
View File

@ -26,10 +26,10 @@ import (
func main() {
skylink, err := skynet.UploadFile("./image.jpg", skynet.DefaultUploadOptions)
if err != nil {
fmt.Printf("Unable to upload: %v\n", err.Error())
fmt.Printf("Unable to upload: %v", err.Error())
return
}
fmt.Printf("Upload successful, skylink: %v\n", skylink)
fmt.Printf("Upload successful, skylink: %v", skylink)
}`
export const ruby = ``

5
packages/sia-skynet/src/components/CodeExamples/CodeExamples.scss
View File

@ -18,6 +18,11 @@
background-color: #343734;
transition: 0.2s line-height, 0.2s background-color, 0.2s color;
text-align: center;
font-size: 14px;
@media (min-width: 360px) {
font-size: 16px;
}
@media (min-width: $largebp) {
padding: 0 32px;

71
packages/sia-skynet/src/components/Footer/Footer.js
View File

@ -2,10 +2,12 @@ import React from "react";
import Fade from "react-reveal/Fade";
import Reveal from "react-reveal/Reveal";
import { Arrow, FooterOrb, FooterCube, Built } from "../../svg";
import { FooterOrb, FooterCube, Built } from "../../svg";
import "./Footer.scss";
import { Mailing } from "..";
const Arrow = () => null; // mock arrows temporarily
export default function Footer() {
return (
<Reveal effect="active">
@ -13,34 +15,38 @@ export default function Footer() {
<div className="width">
<Fade duration={700} distance="40px" bottom>
<div className="footer-column">
<Built />
<Built width={120} height={120} preserveAspectRatio={'xMinYMin'}/>
</div>
</Fade>
<div className="footer-column">
<Fade duration={700} distance="40px" bottom>
<h2>Sia Elsewhere</h2>
<h2>Skynet webportals</h2>
<ul>
<li>
<a href="https://angel.co/company/nebulous/jobs" target="_blank" rel="noopener noreferrer">
Sia Jobs <Arrow />
</a>
</li>
<li>
<a href="https://skynet.luxor.tech" target="_blank" rel="noopener noreferrer">
Luxor Tech
<Arrow />
<a href="https://skydrain.net" target="_blank" rel="noopener noreferrer">
skydrain.net <Arrow />
</a>
</li>
<li>
<a href="https://sialoop.net" target="_blank" rel="noopener noreferrer">
Sia Loop <Arrow />
sialoop.net <Arrow />
</a>
</li>
<li>
<a href="https://skynet.tutemwesi.com" target="_blank" rel="noopener noreferrer">
Tutem Wesi <Arrow />
skynet.tutemwesi.com <Arrow />
</a>
</li>
<li>
<a href="https://siacdn.com" target="_blank" rel="noopener noreferrer">
siacdn.com <Arrow />
</a>
</li>
<li>
<a href="https://vault.lightspeedhosting.com" target="_blank" rel="noopener noreferrer">
vault.lightspeedhosting.com <Arrow />
</a>
</li>
</ul>
@ -51,12 +57,6 @@ export default function Footer() {
<Fade duration={700} distance="40px" bottom>
<h2>Social</h2>
<ul>
<li>
<a href="https://www.reddit.com/r/siacoin/" target="_blank" rel="noopener noreferrer">
Reddit
<Arrow />
</a>
</li>
<li>
<a href="https://twitter.com/siatechhq" target="_blank" rel="noopener noreferrer">
Twitter <Arrow />
@ -68,8 +68,37 @@ export default function Footer() {
</a>
</li>
<li>
<a href="https://github.com/NebulousLabs" target="_blank" rel="noopener noreferrer">
Github <Arrow />
<a href="https://www.reddit.com/r/siacoin" target="_blank" rel="noopener noreferrer">
Reddit <Arrow />
</a>
</li>
<li>
<a href="https://blog.sia.tech" target="_blank" rel="noopener noreferrer">
Blog <Arrow />
</a>
</li>
</ul>
</Fade>
</div>
<div className="footer-column">
<Fade duration={700} distance="40px" bottom>
<h2>Sia</h2>
<ul>
<li>
<a href="https://sia.tech/" target="_blank" rel="noopener noreferrer">
Sia <Arrow />
</a>
</li>
<li>
<a href="https://angel.co/company/nebulous/jobs" target="_blank" rel="noopener noreferrer">
Jobs <Arrow />
</a>
</li>
<li>
<a href="https://support.sia.tech" target="_blank" rel="noopener noreferrer">
Support <Arrow />
</a>
</li>
</ul>

2
packages/sia-skynet/src/components/Footer/Footer.scss
View File

@ -11,6 +11,8 @@
}
.width {
max-width: 1200px;
@media (min-width: $largebp) {
display: flex;
justify-content: space-between;

28
packages/sia-skynet/src/components/HomeStay/HomeStay.js
View File

@ -20,6 +20,11 @@ export default class HomeStay extends Component {
<div className="small-divider" />
</div>
</Fade>
</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
@ -28,26 +33,9 @@ export default class HomeStay extends Component {
</h2>
</Fade>
</header>
<div className="home-stay-flex">
<div className="home-stay-left">
<Fade duration={700} distance="40px" bottom>
<p>
Integer posuere erat a ante venenatis dapibus posuere velit
aliquet. Cras justo odio, dapibus ac facilisis in.
</p>
</Fade>
<Fade duration={700} distance="40px" bottom>
<Mailing id="check1" />
</Fade>
<Fade duration={700} distance="40px" bottom>
<p className="disclaimer-text">
Integer posuere erat a ante venenatis dapibus posuere velit
aliquet. Cras justo odio, dapibus ac facilisis in.
</p>
</Fade>
</div>
<ul className="home-stay-right">
@ -57,11 +45,7 @@ export default class HomeStay extends Component {
icon="github"
url="https://github.com/NebulousLabs/skynet-webportal"
greenText="View project on Github"
title={
<>
NebulousLabs/<strong>Skynet-Webportal</strong>
</>
}
title={<strong>/Skynet-Webportal</strong>}
/>
</li>
</Fade>

101
packages/sia-skynet/src/components/HomeUpload/HomeUpload.js
View File

@ -1,33 +1,33 @@
import React, { Component } from "react";
import classNames from "classnames";
import Dropzone from "react-dropzone";
import Reveal from "react-reveal/Reveal";
import React, { Component } from 'react'
import classNames from 'classnames'
import Dropzone from 'react-dropzone'
import Reveal from 'react-reveal/Reveal'
import { Button, UploadFile } from "../";
import { Deco3, Deco4, Deco5, Folder, DownArrow } from "../../svg";
import "./HomeUpload.scss";
import { Button, UploadFile } from '../'
import { Deco3, Deco4, Deco5, Folder, DownArrow } from '../../svg'
import './HomeUpload.scss'
export default class HomeUpload extends Component {
state = { files: [] };
state = { files: [] }
handleDrop = async acceptedFiles => {
this.setState({
files: [
...acceptedFiles.map(file => {
return { file, status: "uploading" };
return { file, status: 'uploading' }
}),
...this.state.files
]
});
...this.state.files,
],
})
acceptedFiles.forEach(async file => {
const url = `/api/skyfile?filename=${file.name}`;
const fd = new FormData();
fd.append("file", file);
const url = `/api/skyfile?filename=${file.name}`
const fd = new FormData()
fd.append('file', file)
const onComplete = (status, skylink) => {
this.setState(state => {
const index = state.files.findIndex(f => f.file === file);
const index = state.files.findIndex(f => f.file === file)
return {
files: [
@ -35,36 +35,36 @@ export default class HomeUpload extends Component {
{
...state.files[index],
status,
url: `https://siasky.net/${skylink}`
url: `https://siasky.net/${skylink}`,
},
...state.files.slice(index + 1)
]
};
});
};
...state.files.slice(index + 1),
],
}
})
}
try {
const response = await fetch(url, {
method: "POST",
method: 'POST',
body: fd,
mode: "cors"
});
const { skylink } = await response.json();
mode: 'cors',
})
const { skylink } = await response.json()
onComplete("complete", skylink);
onComplete('complete', skylink)
} catch (error) {
onComplete("error");
onComplete('error')
}
})
}
});
};
handleSkylink = (event) => {
event.preventDefault();
handleSkylink = event => {
event.preventDefault()
const skylink = event.target.skylink.value.replace('sia://', '');
const skylink = event.target.skylink.value.replace('sia://', '')
if(skylink.length === 46) {
window.open(`/${event.target.skylink.value}`, '_blank');
if (skylink.match(/^[a-zA-Z0-9_-]{46}$/)) {
window.open(`/${event.target.skylink.value}`, '_blank')
}
}
@ -75,14 +75,12 @@ export default class HomeUpload extends Component {
<div className="home-upload-white fadeInUp delay4">
<div className="home-upload-split">
<div className="home-upload-box ">
<Dropzone
onDrop={acceptedFiles => this.handleDrop(acceptedFiles)}
>
<Dropzone onDrop={acceptedFiles => this.handleDrop(acceptedFiles)}>
{({ getRootProps, getInputProps, isDragActive }) => (
<>
<div
className={classNames("home-upload-dropzone", {
"drop-active": isDragActive
className={classNames('home-upload-dropzone', {
'drop-active': isDragActive,
})}
{...getRootProps()}
>
@ -99,14 +97,6 @@ export default class HomeUpload extends Component {
</>
)}
</Dropzone>
{this.state.files.length > 0 && (
<div className="home-uploaded-files">
{this.state.files.map((file, i) => {
return <UploadFile key={i} {...file} />;
})}
</div>
)}
</div>
<div className="home-upload-retrieve">
@ -123,12 +113,19 @@ export default class HomeUpload extends Component {
</div>
</div>
</div>
{this.state.files.length > 0 && (
<div className="home-uploaded-files">
{this.state.files.map((file, i) => {
return <UploadFile key={i} {...file} />
})}
</div>
)}
</div>
<p className="bottom-text fadeInUp delay5">
Once a file has been uploaded, a 46 byte link called a 'Skylink' is
generated. That link can then be shared with anyone to fetch the
file from Skynet.
Once a file has been uploaded, a 46 byte link called a 'Skylink' is generated. That link can then be shared
with anyone to fetch the file from Skynet.
</p>
<Deco3 className="deco-3 fadeInUp delay6" />
@ -136,6 +133,6 @@ export default class HomeUpload extends Component {
<Deco5 className="deco-5 fadeInUp delay6" />
</div>
</Reveal>
);
)
}
}