diff --git a/.github/workflows/continous-integration.yml b/.github/workflows/continous-integration.yml deleted file mode 100644 index d68e0b83..00000000 --- a/.github/workflows/continous-integration.yml +++ /dev/null @@ -1,47 +0,0 @@ -name: Continous Integration - -on: [pull_request] - -jobs: - build: - runs-on: ubuntu-latest - - steps: - - uses: actions/checkout@v2 - - uses: actions/setup-node@v2 - with: - node-version: 15.x - - - name: Install dependencies - run: yarn - - - name: "Static code analysis: handshake-api" - run: yarn workspace handshake-api prettier --check . - - - name: "Static code analysis: health-check" - run: yarn workspace health-check prettier --check . - - - name: "Static code analysis: website" - run: yarn workspace website prettier --check . - - - name: "Static code analysis: dashboard" - run: yarn workspace dashboard prettier --check . - - # - name: "Build webapp" - # run: yarn workspace webapp build - # env: - # GATSBY_API_URL: "https://siasky.net" - - # - name: Cypress run - # uses: cypress-io/github-action@v2 - # env: - # CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }} - # GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} - # with: - # working-directory: packages/webapp - # record: true - # start: npx http-server public --port 8000 - # wait-on: "http://localhost:8000" - - # - name: Cypress cache prune - # run: yarn cypress cache prune diff --git a/.github/workflows/static-code-analysis.yml b/.github/workflows/static-code-analysis.yml new file mode 100644 index 00000000..08d0cb5d --- /dev/null +++ b/.github/workflows/static-code-analysis.yml @@ -0,0 +1,28 @@ +name: Static Code Analysis + +on: [pull_request] + +jobs: + build: + runs-on: ubuntu-latest + + steps: + - uses: actions/checkout@v2 + - uses: actions/setup-node@v2 + with: + node-version: 16.x + + - name: Install dependencies + run: yarn + + - name: "Static code analysis: handshake-api" + run: yarn workspace handshake-api prettier --check . + + - name: "Static code analysis: health-check" + run: yarn workspace health-check prettier --check . + + - name: "Static code analysis: website" + run: yarn workspace website prettier --check . + + - name: "Static code analysis: dashboard" + run: yarn workspace dashboard prettier --check . diff --git a/.gitignore b/.gitignore index eeb5afa7..0900fafd 100644 --- a/.gitignore +++ b/.gitignore @@ -69,8 +69,8 @@ yarn-error.log .yarn-integrity # Cypress -packages/webapp/cypress/screenshots -packages/webapp/cypress/videos +packages/website/cypress/screenshots +packages/website/cypress/videos # Docker data docker/data diff --git a/README.md b/README.md index bb28fb9c..c392af41 100644 --- a/README.md +++ b/README.md @@ -2,14 +2,14 @@ ## Web application -Use `yarn workspace webapp start` to start the development server. +Use `yarn workspace website start` to start the development server. -Use `yarn workspace webapp build` to compile the application to `/public` directory. +Use `yarn workspace website build` to compile the application to `/public` directory. You can use the below build parameters to customize your web application. -- development example `GATSBY_API_URL=https://siasky.dev yarn workspace webapp start` -- production example `GATSBY_API_URL=https://siasky.net yarn workspace webapp build` +- development example `GATSBY_API_URL=https://siasky.dev yarn workspace website start` +- production example `GATSBY_API_URL=https://siasky.net yarn workspace website build` List of available parameters: @@ -36,8 +36,8 @@ Mongo needs a couple of extra steps in order to start a secure cluster. - Manually run an initialisation `docker run` with extra environment variables that will initialise the admin user with a password (example below). - During the initialisation run mentioned above, we need to make two extra steps within the container: - - Change the ownership of `mgkey` to `mongodb:mongodb` - - Change its permissions to 400 + - Change the ownership of `mgkey` to `mongodb:mongodb` + - Change its permissions to 400 - After these steps are done we can open a mongo shell on the primary node and run `rs.add()` in order to add the new node to the cluster. If you don't know which node is primary, log onto any server and jump into the Mongo's container (`docker exec -it mongo mongo -u admin -p`) and then get the status of the replica set (`rs.status()`). @@ -185,8 +185,8 @@ Before pushing your code, you should verify that it will pass our online test su **Cypress Tests** Verify the Cypress test suite by doing the following: -1. In one terminal screen run `GATSBY_API_URL=https://siasky.net yarn workspace webapp start` -1. In a second terminal screen run `yarn workspace webapp cypress run` +1. In one terminal screen run `GATSBY_API_URL=https://siasky.net yarn workspace website serve` +1. In a second terminal screen run `yarn workspace website cypress run` ## Setting up complete skynet server diff --git a/package.json b/package.json index 71155372..569ae816 100644 --- a/package.json +++ b/package.json @@ -3,12 +3,5 @@ "license": "SEE LICENSE IN LICENSE.md", "workspaces": [ "packages/*" - ], - "dependencies": { - "@tailwindcss/forms": "^0.2.1", - "autoprefixer": "^10.2.4", - "postcss": "^8.2.6", - "sharp": "^0.27.2", - "tailwindcss": "^2.0.4" - } + ] } diff --git a/packages/dashboard/package.json b/packages/dashboard/package.json index 1859e8c9..6068c2a9 100644 --- a/packages/dashboard/package.json +++ b/packages/dashboard/package.json @@ -23,13 +23,12 @@ "http-status-codes": "2.1.4", "ky": "0.25.1", "next": "10.2.3", - "postcss": "8.2.14", + "postcss": "8.3.5", "prettier": "2.3.1", "pretty-bytes": "5.6.0", "react": "17.0.2", "react-dom": "17.0.2", "skynet-js": "3.0.2", - "square": "11.0.0", "stripe": "8.156.0", "superagent": "6.1.0", "swr": "0.5.6", diff --git a/packages/webapp/.eslintrc.json b/packages/webapp/.eslintrc.json deleted file mode 100644 index 0831532b..00000000 --- a/packages/webapp/.eslintrc.json +++ /dev/null @@ -1,22 +0,0 @@ -{ - "env": { - "browser": true, - "es6": true, - "cypress/globals": true, - "node": true - }, - "extends": ["prettier", "eslint:recommended", "plugin:react/recommended"], - "settings": { - "react": { - "version": "detect" - } - }, - "parserOptions": { - "ecmaFeatures": { - "jsx": true - }, - "ecmaVersion": 2020, - "sourceType": "module" - }, - "plugins": ["react", "cypress"] -} diff --git a/packages/webapp/.gitignore b/packages/webapp/.gitignore deleted file mode 100644 index f8b24079..00000000 --- a/packages/webapp/.gitignore +++ /dev/null @@ -1,4 +0,0 @@ -# gatsby files -.cache/ -public -package-lock.json diff --git a/packages/webapp/.prettierignore b/packages/webapp/.prettierignore deleted file mode 100644 index 467b789d..00000000 --- a/packages/webapp/.prettierignore +++ /dev/null @@ -1,5 +0,0 @@ -/.cache -/package.json -/package-lock.json -/public -/docker/data \ No newline at end of file diff --git a/packages/webapp/.prettierrc b/packages/webapp/.prettierrc deleted file mode 100644 index 963354f2..00000000 --- a/packages/webapp/.prettierrc +++ /dev/null @@ -1,3 +0,0 @@ -{ - "printWidth": 120 -} diff --git a/packages/webapp/Dockerfile b/packages/webapp/Dockerfile deleted file mode 100644 index 3354f7a9..00000000 --- a/packages/webapp/Dockerfile +++ /dev/null @@ -1,24 +0,0 @@ -FROM node:16.1.0-alpine - -RUN apk update && apk add autoconf automake libtool gcc make g++ zlib-dev file nasm util-linux - -WORKDIR /usr/app - -COPY package.json . - -ENV CYPRESS_INSTALL_BINARY 0 - -RUN yarn --no-lockfile - -COPY src ./src -COPY static ./static -COPY gatsby-config.js . - -ARG WITH_ACCOUNTS=0 - -ENV GATSBY_TELEMETRY_DISABLED 1 -ENV GATSBY_WITH_ACCOUNTS $WITH_ACCOUNTS - -EXPOSE 9000 - -CMD [ "sh", "-c", "yarn build && yarn serve --host 0.0.0.0" ] diff --git a/packages/webapp/README.md b/packages/webapp/README.md deleted file mode 100644 index e69de29b..00000000 diff --git a/packages/webapp/cypress.json b/packages/webapp/cypress.json deleted file mode 100644 index 11fb5eb8..00000000 --- a/packages/webapp/cypress.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "baseUrl": "http://127.0.0.1:8000", - "projectId": "6qp3um", - "videoUploadOnPasses": false -} diff --git a/packages/webapp/cypress/fixtures/check.json b/packages/webapp/cypress/fixtures/check.json deleted file mode 100644 index 0287aedd..00000000 --- a/packages/webapp/cypress/fixtures/check.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "ok": true -} diff --git a/packages/webapp/cypress/integration/intergration.spec.js b/packages/webapp/cypress/integration/intergration.spec.js deleted file mode 100644 index 6651ee43..00000000 --- a/packages/webapp/cypress/integration/intergration.spec.js +++ /dev/null @@ -1,37 +0,0 @@ -/// - -context("Skynet", () => { - beforeEach(() => { - cy.visit(""); - }); - - it("should render key website elements", () => { - cy.contains("Build a Free Internet"); - cy.contains("Upload your Files"); - cy.contains("Have a Skylink?"); - }); - - it("should be able to upload a file", () => { - cy.intercept("POST", "/skynet/skyfile").as("upload"); - - const fileName = "check.json"; - - cy.wait(1000); // delay for drag-and-drop to work properly every time - cy.get('.home-upload input[type="file"]').attachFile(fileName, { subjectType: "drag-n-drop" }); - - 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 }); - - cy.contains(".upload-file", fileName).within(() => { - cy.get(".url") - .invoke("text") - .should("match", /\/[a-zA-Z0-9-_]{46}/); - - cy.contains("Copy Link").click(); - cy.contains("Copied!").should("be.visible"); - }); - }); -}); diff --git a/packages/webapp/cypress/plugins/index.js b/packages/webapp/cypress/plugins/index.js deleted file mode 100644 index dd68de71..00000000 --- a/packages/webapp/cypress/plugins/index.js +++ /dev/null @@ -1,18 +0,0 @@ -/// -// *********************************************************** -// This example plugins/index.js can be used to load plugins -// -// You can change the location of this file or turn off loading -// the plugins file with the 'pluginsFile' configuration option. -// -// You can read more here: -// https://on.cypress.io/plugins-guide -// *********************************************************** - -// This function is called when a project is opened or re-opened (e.g. due to -// the project's config changing) - -/** - * @type {Cypress.PluginConfig} - */ -module.exports = () => {}; diff --git a/packages/webapp/cypress/support/commands.js b/packages/webapp/cypress/support/commands.js deleted file mode 100644 index 5ccac85d..00000000 --- a/packages/webapp/cypress/support/commands.js +++ /dev/null @@ -1,27 +0,0 @@ -// *********************************************** -// This example commands.js shows you how to -// create various custom commands and overwrite -// existing commands. -// -// For more comprehensive examples of custom -// commands please read more here: -// https://on.cypress.io/custom-commands -// *********************************************** -// -// -// -- This is a parent command -- -// Cypress.Commands.add("login", (email, password) => { ... }) -// -// -// -- This is a child command -- -// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... }) -// -// -// -- This is a dual command -- -// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... }) -// -// -// -- This will overwrite an existing command -- -// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... }) - -import "cypress-file-upload"; diff --git a/packages/webapp/cypress/support/index.js b/packages/webapp/cypress/support/index.js deleted file mode 100644 index a6328a73..00000000 --- a/packages/webapp/cypress/support/index.js +++ /dev/null @@ -1,16 +0,0 @@ -// *********************************************************** -// This example support/index.js is processed and -// loaded automatically before your test files. -// -// This is a great place to put global configuration and -// behavior that modifies Cypress. -// -// You can change the location of this file or turn off -// automatically serving support files with the -// 'supportFile' configuration option. -// -// You can read more here: -// https://on.cypress.io/configuration -// *********************************************************** - -import "./commands"; diff --git a/packages/webapp/gatsby-config.js b/packages/webapp/gatsby-config.js deleted file mode 100644 index 99b37cfc..00000000 --- a/packages/webapp/gatsby-config.js +++ /dev/null @@ -1,55 +0,0 @@ -const { defaultIcons } = require("gatsby-plugin-manifest/common"); - -module.exports = { - siteMetadata: { - title: `Skynet`, - description: `Skynet is a decentralized file sharing and content distribution protocol.`, - author: `Nebulous`, - siteUrl: `https://siasky.net`, - image: `https://siasky.net/icons/icon-512x512.png`, - }, - plugins: [ - `gatsby-plugin-sass`, - `gatsby-plugin-react-helmet`, - { - resolve: `gatsby-source-filesystem`, - options: { - name: `images`, - path: `${__dirname}/src/images`, - }, - }, - `gatsby-plugin-robots-txt`, - { - resolve: `gatsby-plugin-manifest`, - options: { - name: `Skynet`, - short_name: `Skynet`, - start_url: `/`, - background_color: `#f1f7f2`, - theme_color: `#f1f7f2`, - display: `minimal-ui`, - icon: `src/images/logo.svg`, // This path is relative to the root of the site. - icons: [ - ...defaultIcons, - // when we're serving content from the portal on our pathnames that do not have - // favicon defined (basically all non-html content), we want the browsers to be - // able to fall back to favicon.ico (firefox does that) - { - src: `favicon.ico`, - sizes: `32x32`, - type: `image/x-icon`, - }, - ], - }, - }, - { - resolve: "gatsby-plugin-matomo", - options: { - siteId: 3, - matomoUrl: "https://surveillance.sia.tech", - siteUrl: "https://siasky.net", - }, - }, - `gatsby-plugin-remove-serviceworker`, - ], -}; diff --git a/packages/webapp/package.json b/packages/webapp/package.json deleted file mode 100644 index 9309e89f..00000000 --- a/packages/webapp/package.json +++ /dev/null @@ -1,84 +0,0 @@ -{ - "name": "webapp", - "description": "Sia Skynet", - "version": "1.0.0", - "author": "Nebulous", - "dependencies": { - "@fontsource/metropolis": "^4.2.1", - "axios": "0.21.1", - "boolean": "^3.0.2", - "bytes": "3.1.0", - "classnames": "2.3.1", - "gatsby": "^3.0.4", - "gatsby-plugin-manifest": "^3.0.0", - "gatsby-plugin-matomo": "0.9.0", - "gatsby-plugin-react-helmet": "^4.0.0", - "gatsby-plugin-remove-serviceworker": "1.0.0", - "gatsby-plugin-robots-txt": "1.5.6", - "gatsby-plugin-sass": "^4.0.2", - "gatsby-source-filesystem": "^3.0.0", - "http-status-codes": "2.1.4", - "js-cookie": "^2.2.1", - "jsonp": "0.2.1", - "node-sass": "5.0.0", - "path-browserify": "1.0.1", - "prop-types": "15.7.2", - "react": "17.0.1", - "react-countup": "4.3.3", - "react-dom": "17.0.1", - "react-dropzone": "11.3.2", - "react-helmet": "6.1.0", - "react-mailchimp-form": "1.0.2", - "react-mailchimp-subscribe": "^2.1.3", - "react-syntax-highlighter": "15.4.3", - "react-visibility-sensor": "5.1.1", - "skynet-js": "3.0.2" - }, - "devDependencies": { - "cypress": "^7.1.0", - "cypress-file-upload": "5.0.7", - "eslint": "7.26.0", - "eslint-config-prettier": "8.2.0", - "eslint-plugin-cypress": "2.11.2", - "eslint-plugin-react": "7.23.2", - "husky": "4.3.8", - "lint-staged": "10.5.4", - "prettier": "2.2.1" - }, - "keywords": [ - "sia", - "skynet", - "nebulous", - "blockchain", - "decentralized", - "cloud storage" - ], - "license": "SEE LICENSE IN LICENSE.md", - "scripts": { - "build": "gatsby build", - "start": "gatsby develop", - "serve": "gatsby serve", - "clean": "gatsby clean" - }, - "husky": { - "hooks": { - "pre-commit": "lint-staged" - } - }, - "lint-staged": { - "*.{js,jsx,ts,tsx}": [ - "eslint --fix", - "prettier --write" - ], - "*.{md,html,css,scss}": [ - "prettier --write" - ] - }, - "repository": { - "type": "git", - "url": "https://github.com/NebulousLabs/skynet-webportal" - }, - "bugs": { - "url": "https://github.com/NebulousLabs/skynet-webportal/issues" - } -} diff --git a/packages/webapp/src/AppContext.js b/packages/webapp/src/AppContext.js deleted file mode 100644 index 577570f0..00000000 --- a/packages/webapp/src/AppContext.js +++ /dev/null @@ -1,3 +0,0 @@ -import { createContext } from "react"; - -export default createContext(null); diff --git a/packages/webapp/src/components/App/App.js b/packages/webapp/src/components/App/App.js deleted file mode 100644 index fe00c456..00000000 --- a/packages/webapp/src/components/App/App.js +++ /dev/null @@ -1,34 +0,0 @@ -import React from "react"; -import TopSwoosh from "../../svg/TopSwoosh"; -import "./App.scss"; -import StickyTopMessage from "../StickyTopMessage/StickyTopMessage"; -import { HomeTop, HomeUpload, HomeBuilt, HomeSamples, HomeStay, HomeNetwork, Footer } from "../"; - -function App() { - return ( - - -
- - -
- - - - -
- -
-
- - -
-
- -
-
- - ); -} - -export default App; diff --git a/packages/webapp/src/components/App/App.scss b/packages/webapp/src/components/App/App.scss deleted file mode 100644 index 180ad136..00000000 --- a/packages/webapp/src/components/App/App.scss +++ /dev/null @@ -1,30 +0,0 @@ -@import "../../variables.scss"; - -.app { - position: relative; - overflow-x: hidden; - max-width: 100%; -} - -.top-swoosh { - position: absolute; - left: 50%; - top: 0; - transform: translateX(-50%); - margin-left: 340px; - width: 622px; - max-width: none; - - @media (min-width: $largebp) { - margin-left: 380px; - } -} - -.home-white { - background: $white; - padding: 80px 0; - - @media (min-width: $largebp) { - padding: 120px 0; - } -} diff --git a/packages/webapp/src/components/Button/Button.js b/packages/webapp/src/components/Button/Button.js deleted file mode 100644 index ca200d68..00000000 --- a/packages/webapp/src/components/Button/Button.js +++ /dev/null @@ -1,28 +0,0 @@ -import React from "react"; -import classNames from "classnames"; - -import "./Button.scss"; - -export default function Button({ href, type, children, full, className, iconLeft, iconRight, ...rest }) { - const classes = classNames("button", { iconLeft, iconRight, full }, className); - - if (href) { - return ( - - {children} - - ); - } else if (type) { - return ( - - ); - } else { - return ( - - ); - } -} diff --git a/packages/webapp/src/components/Button/Button.scss b/packages/webapp/src/components/Button/Button.scss deleted file mode 100644 index d382ab34..00000000 --- a/packages/webapp/src/components/Button/Button.scss +++ /dev/null @@ -1,36 +0,0 @@ -@import "../../variables.scss"; - -.button { - display: inline-block; - background: $green; - color: $white; - border-radius: 4px; - box-shadow: 0 0 16px 0 rgba(87, 181, 96, 0.1); - line-height: 48px; - font-weight: bold; - padding: 0 32px; - transition: 0.2s background-color, 0.2s color, 0.2s transform; - - @media (min-width: $largebp) { - font-size: 18px; - } - - &:hover { - background-color: $greenHover; - transform: translateY(-2px); - } - - svg { - display: inline-block; - vertical-align: middle; - margin-top: -2px; - } - - &.iconLeft svg { - margin-right: 12px; - } - - &.iconRight svg { - margin-left: 12px; - } -} diff --git a/packages/webapp/src/components/CircleIcon/CircleIcon.js b/packages/webapp/src/components/CircleIcon/CircleIcon.js deleted file mode 100644 index a032c62e..00000000 --- a/packages/webapp/src/components/CircleIcon/CircleIcon.js +++ /dev/null @@ -1,11 +0,0 @@ -import React from "react"; -import PropTypes from "prop-types"; -import "./CircleIcon.scss"; - -export default function CircleIcon({ children }) { - return
{children}
; -} - -CircleIcon.propTypes = { - children: PropTypes.node, -}; diff --git a/packages/webapp/src/components/CircleIcon/CircleIcon.scss b/packages/webapp/src/components/CircleIcon/CircleIcon.scss deleted file mode 100644 index b9a14f55..00000000 --- a/packages/webapp/src/components/CircleIcon/CircleIcon.scss +++ /dev/null @@ -1,10 +0,0 @@ -.circle-icon { - width: 64px; - height: 64px; - border-radius: 32px; - box-shadow: 0 0 8px 0 rgba(23, 25, 23, 0.2); - border: solid 2px currentColor; - display: flex; - align-items: center; - justify-content: center; -} diff --git a/packages/webapp/src/components/CodeExamples/Code.js b/packages/webapp/src/components/CodeExamples/Code.js deleted file mode 100644 index 816977f0..00000000 --- a/packages/webapp/src/components/CodeExamples/Code.js +++ /dev/null @@ -1,80 +0,0 @@ -export const curl = `# upload -curl -X POST "https://siasky.net/skynet/skyfile" -F "file=@src.jpg" - -# download -curl "https://siasky.net/[skylink]" -o dst.jpg`; - -export const browserjs = `import { SkynetClient } from "skynet-js"; - -// create a client -const client = new SkynetClient(); - -// Assume we have a file from an input form. - -async function example() { - try { - // upload - const { skylink } = await client.uploadFile(file); - console.log(\`Upload successful, skylink: \${skylink}\`); - - // download - await client.downloadFile(skylink); - console.log('Download successful'); - } catch (error) { - console.log(error) - } -}`; - -export const python = `import siaskynet as skynet - -# create a client -client = skynet.SkynetClient() - -# upload -skylink = client.upload_file("./src.jpg") -print("Upload successful, skylink: " + skylink) - -# download -client.download_file("./dst.jpg", skylink) -print("Download successful")`; - -export const node = `const { SkynetClient } = require('@nebulous/skynet'); - -// create a client -const client = new SkynetClient(); - -(async () => { - // upload - const skylink = await client.uploadFile("./src.jpg"); - console.log(\`Upload successful, skylink: \${skylink}\`); - - // download - await client.downloadFile("./dst.jpg", skylink); - console.log('Download successful'); -})()`; - -export const go = `package main - -import ( - "fmt" - skynet "github.com/NebulousLabs/go-skynet/v2" -) - -// create a client -var client = skynet.New() - -func main() { - // upload - skylink, err := client.UploadFile("./src.jpg", skynet.DefaultUploadOptions) - if err != nil { - panic("Unable to upload: " + err.Error()) - } - fmt.Printf("Upload successful, skylink: %v\\n", skylink) - - // download - err = client.DownloadFile("./dst.jpg", skylink, skynet.DefaultDownloadOptions) - if err != nil { - panic("Something went wrong, please try again.\\nError: " + err.Error()) - } - fmt.Println("Download successful") -}`; diff --git a/packages/webapp/src/components/CodeExamples/CodeExamples.js b/packages/webapp/src/components/CodeExamples/CodeExamples.js deleted file mode 100644 index 65753ba9..00000000 --- a/packages/webapp/src/components/CodeExamples/CodeExamples.js +++ /dev/null @@ -1,74 +0,0 @@ -import React, { useState, useContext } from "react"; -import classNames from "classnames"; -import { Light as SyntaxHighlighter } from "react-syntax-highlighter"; -import { javascript, go, python, bash } from "react-syntax-highlighter/dist/esm/languages/hljs"; -import Colors from "./Colors"; -import * as snippets from "./Code"; -import "./CodeExamples.scss"; -import AppContext from "../../AppContext"; - -SyntaxHighlighter.registerLanguage("javascript", javascript); -SyntaxHighlighter.registerLanguage("go", go); -SyntaxHighlighter.registerLanguage("python", python); -SyntaxHighlighter.registerLanguage("bash", bash); - -export default function CodeExamples() { - const [active, setActive] = useState(1); - const { apiUrl } = useContext(AppContext); - const interpolateRegExp = new RegExp("https://siasky.net", "g"); - const interpolateSnippet = (snippet) => snippet.replace(interpolateRegExp, apiUrl); - - return ( -
-
- - - - - -
- -
- {active === 1 && ( - - {interpolateSnippet(snippets.curl)} - - )} - - {active === 2 && ( - - {interpolateSnippet(snippets.browserjs)} - - )} - - {active === 3 && ( - - {interpolateSnippet(snippets.python)} - - )} - - {active === 4 && ( - - {interpolateSnippet(snippets.node)} - - )} - - {active === 5 && ( - - {interpolateSnippet(snippets.go)} - - )} -
-
- ); -} diff --git a/packages/webapp/src/components/CodeExamples/CodeExamples.scss b/packages/webapp/src/components/CodeExamples/CodeExamples.scss deleted file mode 100644 index ead04c2f..00000000 --- a/packages/webapp/src/components/CodeExamples/CodeExamples.scss +++ /dev/null @@ -1,69 +0,0 @@ -@import "../../variables.scss"; - -.code-examples-tabs { - border-top-left-radius: 12px; - border-top-right-radius: 12px; - display: flex; - align-items: flex-end; - height: 65px; - - button { - display: block; - flex: 1; - color: $white60; - line-height: 57px; - padding: 0 16px; - cursor: pointer; - user-select: none; - 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; - font-size: 18px; - } - } - - button:hover, - button.active { - color: $white; - background-color: #171917; - line-height: 65px; - } - - button:first-child { - border-top-left-radius: 12px; - } - - button:last-child { - border-top-right-radius: 12px; - } - - button.filler, - button.filler:hover { - flex: 1; - height: 57px; - border-top-right-radius: 12px; - background-color: #343734; - cursor: default; - } -} - -.code-examples-body { - padding: 24px; - background-color: #171917; - border-bottom-left-radius: 12px; - border-bottom-right-radius: 12px; - font-size: 14px; -} - -.react-syntax-highlighter-line-number { - color: $white50; - margin-right: 16px; -} diff --git a/packages/webapp/src/components/CodeExamples/Colors.js b/packages/webapp/src/components/CodeExamples/Colors.js deleted file mode 100644 index e8d5a353..00000000 --- a/packages/webapp/src/components/CodeExamples/Colors.js +++ /dev/null @@ -1,108 +0,0 @@ -export default { - hljs: { - display: "block", - overflowX: "auto", - padding: "0.5em", - background: "#171917", - color: "#e6e1dc", - }, - "hljs-comment": { - color: "#bc9458", - fontStyle: "italic", - }, - "hljs-quote": { - color: "#bc9458", - fontStyle: "italic", - }, - "hljs-keyword": { - color: "#c26230", - }, - "hljs-selector-tag": { - color: "#c26230", - }, - "hljs-string": { - color: "#a5c261", - }, - "hljs-number": { - color: "#a5c261", - }, - "hljs-regexp": { - color: "#a5c261", - }, - "hljs-variable": { - color: "#a5c261", - }, - "hljs-template-variable": { - color: "#a5c261", - }, - "hljs-subst": { - color: "#519f50", - }, - "hljs-tag": { - color: "#e8bf6a", - }, - "hljs-name": { - color: "#e8bf6a", - }, - "hljs-type": { - color: "#da4939", - }, - "hljs-symbol": { - color: "#6d9cbe", - }, - "hljs-bullet": { - color: "#6d9cbe", - }, - "hljs-built_in": { - color: "#6d9cbe", - }, - "hljs-builtin-name": { - color: "#6d9cbe", - }, - "hljs-attr": { - color: "#6d9cbe", - }, - "hljs-link": { - color: "#6d9cbe", - textDecoration: "underline", - }, - "hljs-params": { - color: "#d0d0ff", - }, - "hljs-attribute": { - color: "#cda869", - }, - "hljs-meta": { - color: "#9b859d", - }, - "hljs-title": { - color: "#ffc66d", - }, - "hljs-section": { - color: "#ffc66d", - }, - "hljs-addition": { - backgroundColor: "#144212", - color: "#e6e1dc", - display: "inline-block", - width: "100%", - }, - "hljs-deletion": { - backgroundColor: "#600", - color: "#e6e1dc", - display: "inline-block", - width: "100%", - }, - "hljs-selector-class": { - color: "#9b703f", - }, - "hljs-selector-id": { - color: "#8b98ab", - }, - "hljs-emphasis": { - fontStyle: "italic", - }, - "hljs-strong": { - fontWeight: "bold", - }, -}; diff --git a/packages/webapp/src/components/FAQ/FAQ.js b/packages/webapp/src/components/FAQ/FAQ.js deleted file mode 100644 index d3ce4b57..00000000 --- a/packages/webapp/src/components/FAQ/FAQ.js +++ /dev/null @@ -1,20 +0,0 @@ -import React from "react"; -import PropTypes from "prop-types"; -import "./FAQ.scss"; - -export default function FAQ({ title, children }) { - return ( -
-
-
-

{title}

- {children} -
-
- ); -} - -FAQ.propTypes = { - title: PropTypes.string, - children: PropTypes.node, -}; diff --git a/packages/webapp/src/components/FAQ/FAQ.scss b/packages/webapp/src/components/FAQ/FAQ.scss deleted file mode 100644 index 13b07ecf..00000000 --- a/packages/webapp/src/components/FAQ/FAQ.scss +++ /dev/null @@ -1,41 +0,0 @@ -@import "../../variables.scss"; - -.faq { - display: flex; - margin-bottom: 30px; -} - -.faq-text { - flex: 1; - margin-left: 16px; - - h3 { - font-weight: 700; - color: $gray; - margin-bottom: 10px; - line-height: 1.78; - font-size: 16px; - - @media (min-width: $largebp) { - font-size: 18px; - } - } - - p { - color: $lightGray; - line-height: 1.7; - font-size: 13px; - - @media (min-width: $largebp) { - font-size: 14px; - } - } -} - -.faq-dash { - height: 2px; - width: 32px; - background: $green; - box-shadow: 0 0 8px 0 rgba(87, 181, 96, 0.3); - margin-top: 16px; -} diff --git a/packages/webapp/src/components/Footer/Footer.js b/packages/webapp/src/components/Footer/Footer.js deleted file mode 100644 index 2ed8fb3f..00000000 --- a/packages/webapp/src/components/Footer/Footer.js +++ /dev/null @@ -1,135 +0,0 @@ -import React from "react"; - -import { FooterOrb, FooterCube, Built } from "../../svg"; -import "./Footer.scss"; -import { Mailing } from ".."; - -export default function Footer() { - return ( - - ); -} diff --git a/packages/webapp/src/components/Footer/Footer.scss b/packages/webapp/src/components/Footer/Footer.scss deleted file mode 100644 index e01e93a4..00000000 --- a/packages/webapp/src/components/Footer/Footer.scss +++ /dev/null @@ -1,102 +0,0 @@ -@import "../../variables.scss"; - -.footer { - background-color: #171917; - padding: 60px 0 100px; - overflow: hidden; - position: relative; - - @media (min-width: $largebp) { - padding: 60px 0 140px; - } - - .width { - max-width: 1200px; - - @media (min-width: $largebp) { - display: flex; - justify-content: space-between; - } - } - - .footer-column + .footer-column { - margin-top: 40px; - - @media (min-width: $largebp) { - margin: 0 0 0 60px; - } - } - - h2 { - font-size: 16px; - color: $white; - margin-bottom: 25px; - - @media (min-width: $largebp) { - font-size: 18px; - } - } - - li + li { - margin-top: 5px; - } - - ul + h2 { - margin-top: 40px; - } - - a { - color: $green; - display: inline-flex; - align-items: center; - transition: 0.2s color; - font-size: 13px; - - @media (min-width: $largebp) { - font-size: 14px; - } - - &:hover { - color: $white; - } - - svg { - margin-left: 10px; - } - } -} - -.footer-orb { - position: absolute; - right: 10px; - bottom: 100px; - margin-top: -13px; - margin-left: -13px; - animation: 8s floatLarge infinite; - - @media (min-width: $largebp) { - margin-left: 180px; - right: auto; - left: 50%; - bottom: 90px; - } -} - -.footer-cube { - position: absolute; - right: 30px; - top: 100%; - margin-top: -109px; - margin-left: -163px; - animation: 8s float infinite; - - @media (min-width: $largebp) { - margin-left: -100px; - right: auto; - left: 50%; - } -} - -.footer-built { - margin-top: 30px; -} diff --git a/packages/webapp/src/components/HomeBuilt/HomeBuilt.js b/packages/webapp/src/components/HomeBuilt/HomeBuilt.js deleted file mode 100644 index 4d0cf99f..00000000 --- a/packages/webapp/src/components/HomeBuilt/HomeBuilt.js +++ /dev/null @@ -1,32 +0,0 @@ -import React from "react"; - -import "./HomeBuilt.scss"; -import { CircleIcon, CodeExamples } from "../"; -import { Cylinder, SmallOrb } from "../../svg"; - -export default function HomeBuilt() { - return ( -
-
-
-
-
- - - - - -
-
-
-

- Infrastructure built for -
- application developers -

-
- - -
- ); -} diff --git a/packages/webapp/src/components/HomeBuilt/HomeBuilt.scss b/packages/webapp/src/components/HomeBuilt/HomeBuilt.scss deleted file mode 100644 index 4613ef2c..00000000 --- a/packages/webapp/src/components/HomeBuilt/HomeBuilt.scss +++ /dev/null @@ -1,53 +0,0 @@ -@import "../../variables.scss"; - -.home-built { - padding-top: 80px; - - @media (min-width: $largebp) { - padding-top: 150px; - } -} - -.home-built-header { - text-align: center; - - h2 { - text-align: center; - font-size: 32px; - margin-bottom: 50px; - - @media (min-width: $largebp) { - margin-bottom: 70px; - } - } -} - -.home-built-divider { - display: inline-flex; - align-items: center; - margin: 0 auto 32px; - - @media (min-width: $largebp) { - margin-bottom: 40px; - } - - .circle-icon { - margin: 0 14px; - } - - .small-orb:first-of-type { - margin-left: 14px; - } - - .small-orb:last-of-type { - margin-right: 14px; - } - - .small-divider:first-of-type { - margin-right: 8px; - } - - .small-divider:last-of-type { - margin-left: 8px; - } -} diff --git a/packages/webapp/src/components/HomeNetwork/HomeNetwork.js b/packages/webapp/src/components/HomeNetwork/HomeNetwork.js deleted file mode 100644 index 87d56d1c..00000000 --- a/packages/webapp/src/components/HomeNetwork/HomeNetwork.js +++ /dev/null @@ -1,177 +0,0 @@ -import React, { useState } from "react"; -import PropTypes from "prop-types"; -import CountUp from "react-countup"; -import VisibilitySensor from "react-visibility-sensor"; - -import useStats, { AVAILABLE_STATS } from "./useStats"; -import "./HomeNetwork.scss"; -import { CircleIcon, FAQ } from "../"; -import { SmallOrb, LogoSolid, Deco6, Deco7, Deco8 } from "../../svg"; - -const STATS_MAP = [ - { name: "TB Used", key: AVAILABLE_STATS.STORAGE_USED_TB }, - { name: "TB Capacity", key: AVAILABLE_STATS.NETWORK_CAPACITY_TB }, - { name: "Hosts", key: AVAILABLE_STATS.ONLINE_HOSTS_COUNT }, - { name: "Storage/TB", key: AVAILABLE_STATS.STORAGE_COST_USD, currency: true }, - { name: "Bandwidth/TB", key: AVAILABLE_STATS.BANDWIDTH_DOWN_COST_USD, currency: true }, -]; - -export default function HomeNetwork() { - const [visible, setVisible] = useState(false); - const stats = useStats(); - const onChange = (isVisible) => { - if (isVisible && !visible) { - setVisible(true); - } - }; - - return ( -
-
-
- - - - -
-
-
-

- Sia -
- Network -

-
- - - -
- {STATS_MAP.map((stat, i) => ( - -
-
- {visible && } - {stat.name} -
-
- {i !== 4 &&
} - - ))} - - - -
-
- stats provided by{" "} - - siastats.info - -
- - - -
-
-

- Skynet Webportals 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. -

- -

- Sia 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. -

- -

- - Learn more about Sia - -

-
-
- -

- 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! - - read more - -

- - - -

- 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. - - read more - -

- - - -

- Skynet'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! - - read more - -

- - - -

- Storage costs 10x lower than centralized providers and bandwidth costs are 100x lower – without - sacrificing performance or reliability. -

- - - - View more FAQ - -
-
-
- ); -} - -function StatValue({ stat, value }) { - const displayDollars = stat.currency && value >= 1; - const displayCents = stat.currency && value < 1; - - return ( -

- {displayDollars && "$"} - - {displayCents && "¢"} -

- ); -} - -StatValue.propTypes = { - stat: PropTypes.shape({ - key: PropTypes.string.isRequired, - name: PropTypes.string.isRequired, - currency: PropTypes.bool, - }).isRequired, - value: PropTypes.number.isRequired, -}; diff --git a/packages/webapp/src/components/HomeNetwork/HomeNetwork.scss b/packages/webapp/src/components/HomeNetwork/HomeNetwork.scss deleted file mode 100644 index a7ced868..00000000 --- a/packages/webapp/src/components/HomeNetwork/HomeNetwork.scss +++ /dev/null @@ -1,211 +0,0 @@ -@import "../../variables.scss"; - -.home-network { - padding: 80px 0; - - @media (min-width: $largebp) { - padding: 120px 0; - } -} - -.home-network-header { - h2 { - font-size: 32px; - margin-bottom: 36px; - } -} - -.home-network-divider { - display: flex; - align-items: center; - color: $green; - margin-bottom: 32px; - - @media (min-width: $largebp) { - margin-bottom: 40px; - } - - .circle-icon { - box-shadow: 0 0 8px 0 rgba(87, 181, 96, 0.3); - margin-right: 14px; - } - - .divider { - margin: 0 8px 0 14px; - } -} - -.home-network-stats { - background: $green; - border-radius: 12px; - box-shadow: 0 4px 24px 0 rgba(87, 181, 96, 0.3); - padding: 32px 24px; - position: relative; - - @media (min-width: $largebp) { - display: flex; - align-items: center; - padding: 40px 30px; - } - - @media (min-width: $largebp) { - padding: 50px 20px; - } - - .divider { - height: 2px; - width: 240px; - background: $black10; - margin: 20px auto; - - @media (min-width: $largebp) { - height: 56px; - width: 2px; - } - } -} - -.home-network-stats-provider { - text-align: right; - color: $green; - font-size: 13px; - margin-right: 12px; // keep the same as the border radius of .home-network-stats - - a { - color: $green; - - &:hover { - color: $black; - } - } -} - -.deco-6 { - position: absolute; - top: -185px; - right: 10px; - animation: 8s float infinite; -} - -.deco-7 { - position: absolute; - top: -130px; - right: 35px; - animation: 6s float infinite; -} - -.deco-8 { - position: absolute; - top: -65px; - right: -95px; - animation: 10s float infinite; -} - -.home-network-stat { - text-align: center; - - @media (min-width: $largebp) { - text-align: center; - width: calc(20% - 2px); - } - - .inner { - @media (min-width: $largebp) { - margin: 0 auto; - display: inline-block; - text-align: left; - min-width: 110px; - } - } - - h3 { - font-weight: 700; - color: $white; - font-size: 32px; - min-width: 10px; - - @media (min-width: $largebp) { - font-size: 40px; - } - } -} - -.network-stat-name { - font-size: 14px; - color: $white50; -} - -.home-network-columns { - margin-top: 40px; - - @media (min-width: $largebp) { - display: flex; - margin-top: 60px; - } -} - -.home-network-column { - @media (min-width: $largebp) { - flex: 1; - display: flex; - flex-direction: column; - } - - & + & { - margin-top: 40px; - - @media (min-width: $largebp) { - margin: 0 0 0 30px; - } - } - - &.left p { - color: $gray; - - @media (min-width: $largebp) { - font-size: 18px; - } - } - - &.left p + p { - margin-top: 30px; - - @media (min-width: $largebp) { - margin-top: 40px; - } - } - - .more { - color: $green; - font-size: 13px; - display: inline-flex; - align-items: center; - transition: 0.2s color; - - &:hover { - color: $black; - } - - @media (min-width: $largebp) { - font-size: 14px; - } - - svg { - margin-left: 10px; - transition: 0.2s transform, 0.2s color; - } - - &:hover svg { - transform: translateX(2px); - color: $black; - } - } - - .more-faq { - margin-left: 48px; - } - - .read-more { - display: block; - } -} diff --git a/packages/webapp/src/components/HomeNetwork/useStats.js b/packages/webapp/src/components/HomeNetwork/useStats.js deleted file mode 100644 index 9ebc2fc9..00000000 --- a/packages/webapp/src/components/HomeNetwork/useStats.js +++ /dev/null @@ -1,68 +0,0 @@ -import { useEffect, useState } from "react"; -import axios from "axios"; - -export const AVAILABLE_STATS = { - ONLINE_HOSTS_COUNT: "onlineHostsCount", - STORAGE_USED_TB: "storageUsedTB", - NETWORK_CAPACITY_TB: "networkCapacityTB", - STORAGE_COST_USD: "storageCostUSD", - BANDWIDTH_DOWN_COST_USD: "bandwidthDownCostUSD", -}; - -export default function useStats() { - const [stats, setStats] = useState({ - [AVAILABLE_STATS.ONLINE_HOSTS_COUNT]: null, - [AVAILABLE_STATS.STORAGE_USED_TB]: null, - [AVAILABLE_STATS.NETWORK_CAPACITY_TB]: null, - [AVAILABLE_STATS.STORAGE_COST_USD]: null, - [AVAILABLE_STATS.BANDWIDTH_DOWN_COST_USD]: null, - }); - - useEffect(() => { - async function fetchData() { - const [bandwidth, storage, price] = await Promise.all([getBandwidthStats(), getStorageStats(), getPriceStats()]); - - setStats({ ...bandwidth, ...storage, ...price }); - } - - fetchData(); - }, [setStats]); - - return stats; -} - -async function getBandwidthStats() { - // { up: 76.09, down: 102.66, upusd: 0.23, downusd: 0.32 } - const { data } = await axios.get("https://siastats.info/dbs/bandwidthpricesdb.json"); - // some entries do not contain the required property so make sure to get one that does - const current = data.reverse().find((entry) => "downusd" in entry); - - return { - [AVAILABLE_STATS.BANDWIDTH_DOWN_COST_USD]: current.downusd, - }; -} - -async function getPriceStats() { - // { price: 504.59, newcontractformation: 30.79, usd: 1.55, sfperfees: 8.98 } - const { data } = await axios.get("https://siastats.info/dbs/storagepricesdb.json"); - // some entries do not contain the required property so make sure to get one that does - const current = data.reverse().find((entry) => "usd" in entry); - - return { - [AVAILABLE_STATS.STORAGE_COST_USD]: current.usd, - }; -} - -async function getStorageStats() { - // { block_height: 247816, block_timestamp: 1582285828, hashrate: 6212581269715416, - // difficulty: 3501953420754597000, coin_supply: 43638591164, coin_price_USD: 0.003, - // market_cap_USD: 130915773, used_storage_TB: 725.26, network_capacity_TB: 2270.96, - // online_hosts: 360, active_contracts: 62997 } - const { data } = await axios.get("https://siastats.info/dbs/network_status.json"); - - return { - [AVAILABLE_STATS.ONLINE_HOSTS_COUNT]: data.online_hosts, - [AVAILABLE_STATS.STORAGE_USED_TB]: data.used_storage_TB, - [AVAILABLE_STATS.NETWORK_CAPACITY_TB]: data.network_capacity_TB, - }; -} diff --git a/packages/webapp/src/components/HomeSamples/HomeSamples.js b/packages/webapp/src/components/HomeSamples/HomeSamples.js deleted file mode 100644 index 9cddf5db..00000000 --- a/packages/webapp/src/components/HomeSamples/HomeSamples.js +++ /dev/null @@ -1,52 +0,0 @@ -import React from "react"; - -import "./HomeSamples.scss"; -import { Sample } from "../"; - -const samples = [ - { type: "HTML", url: "/PAL0w4SdA5rFCDGEutgpeQ50Om-YkBabtXVOJAkmedslKw" }, - { type: "PDF", url: "/XABvi7JtJbQSMAcDwnUnmp2FKDPjg8_tTTFP4BwMSxVdEg" }, - { type: "Image", url: "/IADUs8d9CQjUO34LmdaaNPK_STuZo24rpKVfYW3wPPM2uQ" }, - { type: "Audio", url: "/_A2zt5SKoqwnnZU4cBF8uBycSKULXMyeg1c5ZISBr2Q3dA" }, - { type: "Video", url: "/CACqf4NlIMlA0CCCieYGjpViPGyfyJ4v1x3bmuCKZX8FKA" }, - { type: "JSON", url: "/AAC0uO43g64ULpyrW0zO3bjEknSFbAhm8c-RFP21EQlmSQ" }, - { type: "Dapp", url: "/hns/marstorage/" }, -]; - -export default function HomeSamples() { - return ( -
-

Above are some code snippets for uploading and retrieving data.

-

- Skynet includes{" "} - - SDKs - {" "} - for popular programming languages and{" "} - - APIs - {" "} - that integrate seamlessly with your existing apps. You can follow these guides to start using Skynet with{" "} - - the Skynet CLI - {" "} - and{" "} - - integrate Skynet - {" "} - into your application. -

- -
- {samples.map((sample, i) => ( - - ))} -
-
- ); -} diff --git a/packages/webapp/src/components/HomeSamples/HomeSamples.scss b/packages/webapp/src/components/HomeSamples/HomeSamples.scss deleted file mode 100644 index 57ec5d35..00000000 --- a/packages/webapp/src/components/HomeSamples/HomeSamples.scss +++ /dev/null @@ -1,40 +0,0 @@ -@import "../../variables.scss"; - -.home-samples { - text-align: center; - margin: 0; - padding: 60px 0; - - @media (min-width: $largebp) { - padding: 65px 0 100px; - } - - p { - margin: 0 auto 24px; - max-width: 460px; - - @media (min-width: $largebp) { - font-size: 18px; - max-width: 600px; - } - - &:last-of-type { - margin-bottom: 48px; - } - } - - .sample { - display: inline-block; - margin: 10px; - min-width: 124px; - text-align: center; - - @media (min-width: $tinybp) { - margin: 10px 20px; - } - - @media (min-width: $smallbp) { - margin: 10px 40px; - } - } -} diff --git a/packages/webapp/src/components/HomeStay/HomeStay.js b/packages/webapp/src/components/HomeStay/HomeStay.js deleted file mode 100644 index 04c905ba..00000000 --- a/packages/webapp/src/components/HomeStay/HomeStay.js +++ /dev/null @@ -1,64 +0,0 @@ -import React, { Component } from "react"; - -import "./HomeStay.scss"; -import { SocialLink, CircleIcon, Mailing } from "../"; -import { SmallOrb, Pyramid } from "../../svg"; - -export default class HomeStay extends Component { - render() { - return ( -
-
-
- - - - -
-
-
-
- -
-
-
-

- Stay up to date with -
- Skynet updates -

-
- -
- -
    -
  • - /Skynet-Webportal} - /> -
    • -
  • - /Sia} - /> -
    • -
  • - @SiaTechHQ} - /> -
    • -
-
-
- ); - } -} diff --git a/packages/webapp/src/components/HomeStay/HomeStay.scss b/packages/webapp/src/components/HomeStay/HomeStay.scss deleted file mode 100644 index 2da8c0de..00000000 --- a/packages/webapp/src/components/HomeStay/HomeStay.scss +++ /dev/null @@ -1,73 +0,0 @@ -@import "../../variables.scss"; - -.home-stay-header { - h2 { - font-size: 32px; - margin-bottom: 36px; - } -} - -.home-stay-divider { - display: flex; - align-items: center; - color: $green; - margin-bottom: 32px; - - @media (min-width: $largebp) { - margin-bottom: 40px; - } - - .circle-icon { - box-shadow: 0 0 8px 0 rgba(87, 181, 96, 0.3); - margin-right: 14px; - } - - .divider { - margin: 0 8px 0 14px; - } -} - -.home-stay-flex { - @media (min-width: $largebp) { - display: flex; - } -} - -.home-stay-left { - @media (min-width: $largebp) { - flex: 1; - margin-right: 60px; - } - - p { - max-width: 553px; - - @media (min-width: $largebp) { - font-size: 18px; - } - } - - .disclaimer-text { - font-size: 13px; - color: $lightGray; - line-height: 1.7; - max-width: 438px; - - @media (min-width: $largebp) { - font-size: 14px; - } - } -} - -.home-stay-right { - margin-top: 40px; - - @media (min-width: $largebp) { - width: 305px; - margin-top: 0; - } - - li + li { - margin-top: 24px; - } -} diff --git a/packages/webapp/src/components/HomeStay/MailchimpForm.js b/packages/webapp/src/components/HomeStay/MailchimpForm.js deleted file mode 100644 index e69de29b..00000000 diff --git a/packages/webapp/src/components/HomeTop/HomeTop.js b/packages/webapp/src/components/HomeTop/HomeTop.js deleted file mode 100644 index 4d1590a3..00000000 --- a/packages/webapp/src/components/HomeTop/HomeTop.js +++ /dev/null @@ -1,35 +0,0 @@ -import React from "react"; -import { boolean } from "boolean"; -import logo from "../../images/logo.svg"; -import "./HomeTop.scss"; -import { Skynet, Deco1, Deco2 } from "../../svg"; - -export default function HomeTop() { - return ( -
- Skynet logo - - -

Build a Free Internet.

- -

- The decentralized CDN and file sharing platform for devs. Skynet is the storage foundation for a Free Internet! -

- - {boolean(process.env.GATSBY_WITH_ACCOUNTS) && ( -

- - Sign up now! - {" "} - Already have an account? Go to your{" "} - - dashboard - -

- )} - - - -
- ); -} diff --git a/packages/webapp/src/components/HomeTop/HomeTop.scss b/packages/webapp/src/components/HomeTop/HomeTop.scss deleted file mode 100644 index 046c636d..00000000 --- a/packages/webapp/src/components/HomeTop/HomeTop.scss +++ /dev/null @@ -1,80 +0,0 @@ -@import "../../variables.scss"; - -.home-top { - text-align: center; - padding: 60px 0 50px; - position: relative; - - @media (min-width: $largebp) { - padding: 60px 0 70px; - } - - .logo { - display: inline-block; - width: 85px; - margin-bottom: 5px; - margin-right: 10px; // move it 10px so it looks like it's centered - } - - .wordmark { - margin: 0 auto 35px; - } - - h1 { - font-size: 44px; - line-height: 1.14; - margin-bottom: 38px; - - @media (min-width: $largebp) { - font-size: 56px; - } - } - - p { - font-size: 21px; - line-height: 1.33; - max-width: 560px; - margin: 0 auto; - - &.auth-links { - font-size: 18px; - - .link { - font-weight: bold; - } - } - - @media (min-width: $largebp) { - font-size: 24px; - max-width: 670px; - } - - & + p { - margin-top: 24px; - } - } -} - -.deco-1 { - position: absolute; - left: 100%; - bottom: 25%; - margin-left: 20px; - animation: 6s float infinite; - - @media (min-width: 591px) { - margin-left: 100px; - } -} - -.deco-2 { - position: absolute; - left: 100%; - bottom: 5%; - margin-left: -15px; - animation: 8s float infinite; - - @media (min-width: 591px) { - margin-left: 50px; - } -} diff --git a/packages/webapp/src/components/HomeUpload/HomeUpload.js b/packages/webapp/src/components/HomeUpload/HomeUpload.js deleted file mode 100644 index f540dc41..00000000 --- a/packages/webapp/src/components/HomeUpload/HomeUpload.js +++ /dev/null @@ -1,248 +0,0 @@ -import React, { useState, useContext, useEffect } from "react"; -import bytes from "bytes"; -import classNames from "classnames"; -import { getReasonPhrase, StatusCodes } from "http-status-codes"; -import path from "path-browserify"; -import { useDropzone } from "react-dropzone"; -import { Button, UploadFile } from "../"; -import { Deco3, Deco4, Deco5, Folder, DownArrow } from "../../svg"; -import "./HomeUpload.scss"; -import AppContext from "../../AppContext"; -import { SkynetClient, parseSkylink } from "skynet-js"; - -const isValidSkylink = (skylink) => { - try { - parseSkylink(skylink); // try to parse the skylink, it will throw on error - } catch (error) { - return false; - } - - return true; -}; - -const getFilePath = (file) => file.webkitRelativePath || file.path || file.name; - -const getRelativeFilePath = (file) => { - const filePath = getFilePath(file); - const { root, dir, base } = path.parse(filePath); - const relative = path.normalize(dir).slice(root.length).split(path.sep).slice(1); - - return path.join(...relative, base); -}; - -const getRootDirectory = (file) => { - const filePath = getFilePath(file); - const { root, dir } = path.parse(filePath); - - return path.normalize(dir).slice(root.length).split(path.sep)[0]; -}; - -const createUploadErrorMessage = (error) => { - // The request was made and the server responded with a status code that falls out of the range of 2xx - if (error.response) { - if (error.response.data.message) { - return `Upload failed with error: ${error.response.data.message}`; - } - - const statusCode = error.response.status; - const statusText = getReasonPhrase(error.response.status); - - return `Upload failed, our server received your request but failed with status code: ${statusCode} ${statusText}`; - } - - // The request was made but no response was received. The best we can do is detect whether browser is online. - // This will be triggered mostly if the server is offline or misconfigured and doesn't respond to valid request. - if (error.request) { - if (!navigator.onLine) { - return "You are offline, please connect to the internet and try again"; - } - - // TODO: We should add a note "our team has been notified" and have some kind of notification with this error. - return "Server failed to respond to your request, please try again later."; - } - - // TODO: We should add a note "our team has been notified" and have some kind of notification with this error. - return `Critical error, please refresh the application and try again. ${error.message}`; -}; - -export default function HomeUpload() { - const [files, setFiles] = useState([]); - const [skylink, setSkylink] = useState(""); - const { apiUrl } = useContext(AppContext); - const [directoryMode, setDirectoryMode] = useState(false); - const client = new SkynetClient(apiUrl); - - useEffect(() => { - if (directoryMode) { - inputRef.current.setAttribute("webkitdirectory", "true"); - } else { - inputRef.current.removeAttribute("webkitdirectory"); - } - }, [directoryMode]); - - const handleDrop = async (acceptedFiles) => { - if (directoryMode && acceptedFiles.length) { - const rootDir = getRootDirectory(acceptedFiles[0]); // get the file path from the first file - - acceptedFiles = [{ name: rootDir, directory: true, files: acceptedFiles }]; - } - - setFiles((previousFiles) => [...acceptedFiles.map((file) => ({ file, status: "uploading" })), ...previousFiles]); - - const onFileStateChange = (file, state) => { - setFiles((previousFiles) => { - const index = previousFiles.findIndex((f) => f.file === file); - - return [ - ...previousFiles.slice(0, index), - { - ...previousFiles[index], - ...state, - }, - ...previousFiles.slice(index + 1), - ]; - }); - }; - - acceptedFiles.forEach((file) => { - const onUploadProgress = (progress) => { - const status = progress === 1 ? "processing" : "uploading"; - - onFileStateChange(file, { status, progress }); - }; - - // Reject files larger than our hard limit of 1 GB with proper message - if (file.size > bytes("1 GB")) { - onFileStateChange(file, { status: "error", error: "This file size exceeds the maximum allowed size of 1 GB." }); - - return; - } - - const upload = async () => { - try { - let response; - - if (file.directory) { - const directory = file.files.reduce((acc, file) => ({ ...acc, [getRelativeFilePath(file)]: file }), {}); - - response = await client.uploadDirectory(directory, encodeURIComponent(file.name), { onUploadProgress }); - } else { - response = await client.uploadFile(file, { onUploadProgress }); - } - - onFileStateChange(file, { status: "complete", url: client.getSkylinkUrl(response.skylink) }); - } catch (error) { - if (error.response && error.response.status === StatusCodes.TOO_MANY_REQUESTS) { - onFileStateChange(file, { progress: -1 }); - - return new Promise((resolve) => setTimeout(() => resolve(upload()), 3000)); - } - - onFileStateChange(file, { status: "error", error: createUploadErrorMessage(error) }); - } - }; - - upload(); - }); - }; - - const { getRootProps, getInputProps, isDragActive, inputRef } = useDropzone({ onDrop: handleDrop }); - - const handleSkylink = (event) => { - event.preventDefault(); - - // only try to open a valid skylink - if (isValidSkylink(skylink)) { - client.openFile(skylink); - } - }; - - return ( -
-
-
-
-
- -

Upload your {directoryMode ? "Directory" : "Files"}

- Drop your {directoryMode ? "directory" : "files"} here to pin to Skynet - - -
- - - {directoryMode && ( -

- 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{" "} - - caniuse.com - - . -

- )} -
- -
-
- -

Paste the link to retrieve your file

- -
- setSkylink(event.target.value)} - /> - -
-
-
-
- - {files.length > 0 && ( -
- {files.map((file, i) => { - return ; - })} -
- )} -
- -

- Upon uploading a file, Skynet generates a 46 byte link called a Skylink. This link can then be - shared with anyone to retrieve the file on any Skynet Webportal. -

- - - - -
- ); -} diff --git a/packages/webapp/src/components/HomeUpload/HomeUpload.scss b/packages/webapp/src/components/HomeUpload/HomeUpload.scss deleted file mode 100644 index 0e43fcd7..00000000 --- a/packages/webapp/src/components/HomeUpload/HomeUpload.scss +++ /dev/null @@ -1,269 +0,0 @@ -@import "../../variables.scss"; - -.home-upload { - position: relative; - - .bottom-text { - color: $lightGray; - font-size: 16px; - text-align: center; - max-width: 590px; - margin: 25px auto 0; - - @media (min-width: $largebp) { - font-size: 16px; - } - } -} - -.home-upload-white { - 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; -} - -.home-upload-split { - border: 1px dashed #c5cec7; - border-radius: 4px; - padding: 20px; - - @media (min-width: $largebp) { - display: flex; - } -} - -.home-upload-box { - padding-bottom: 20px; - - @media (min-width: $largebp) { - width: 50%; - padding-bottom: 0; - padding-right: 20px; - } -} - -.home-upload-dropzone { - border-radius: 4px; - height: 200px; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - text-align: center; - outline: none; - - &:hover { - background-color: rgba(0, 0, 0, 0.03); - cursor: pointer; - } - - &:hover .button { - background-color: $greenHover; - transform: translateY(-2px); - } - - &.drop-active { - background-color: $green; - border: 1px solid $green; - - h3 { - color: $white; - } - - .button { - display: none; - } - } - - .button { - margin-top: 20px; - - @media (min-width: $largebp) { - margin-top: 30px; - } - } -} - -.home-upload-mode-switch { - display: block; - font-size: 13px; - margin: 10px auto 0; - - @media (min-width: $largebp) { - font-size: 14px; - } -} - -.home-upload-directory-mode-notice { - color: $lightGray; - font-size: 13px; - line-height: 1.2em; - margin-top: 20px; - text-align: center; -} - -.home-upload-text { - color: $gray; - display: block; - transition: 0.2s color; - font-size: 13px; - - @media (min-width: $largebp) { - font-size: 14px; - } - - .drop-active & { - color: $white; - } - - h3 { - font-size: 16px; - margin-bottom: 5px; - color: $darkGray; - - @media (min-width: $largebp) { - font-size: 18px; - } - } -} - -.deco-3 { - position: absolute; - top: -70px; - left: -5px; - animation: 8s float infinite; -} - -.deco-4 { - position: absolute; - top: -32px; - left: -90px; - animation: 6s float infinite; -} - -.deco-5 { - position: absolute; - top: 52px; - left: -56px; - animation: 10s float infinite; -} - -.home-uploaded-files { - border: solid 1px #c5cec7; - padding: 0 20px; - margin-top: 10px; - border-radius: 4px; - - @media (min-width: $largebp) { - padding: 0 40px; - } - - .upload-file + .upload-file { - border-top: 1px solid rgba(197, 206, 199, 0.4); - } -} - -.home-upload-retrieve { - align-items: center; - text-align: center; - display: flex; - flex-direction: column; - text-align: center; - justify-content: center; - border-top: 1px dashed #c5cec7; - height: 200px; - padding: 40px 20px; - - @media (min-width: $largebp) { - width: 50%; - padding: 20px 40px; - border-top: 0; - border-left: 1px dashed #c5cec7; - } - - .home-upload-text { - width: 100%; - } -} - -.home-upload-retrieve-form { - width: 100%; - margin-top: 3px; - position: relative; - margin-top: 20px; - - @media (min-width: $largebp) { - margin-top: 30px; - } - - input { - border: 1px solid #cbd3cd; - border-radius: 4px; - line-height: 46px; - transition: 0.2s border-color; - padding: 0 64px 0 16px; - font-size: 13px; - - @media (min-width: $largebp) { - font-size: 14px; - } - } - - input:hover, - input:hover + button { - border-color: rgb(143, 143, 143); - } - - input:focus, - input:focus + button { - border-color: $green; - } - - button { - border-left: 1px solid #cbd3cd; - border-top-right-radius: 4px; - border-bottom-right-radius: 4px; - width: 46px; - height: 48px; - display: flex; - align-items: center; - justify-content: center; - position: absolute; - top: 0; - right: 0; - color: #cbd3cd; - transition: 0.2s background-color, 0.2s border-color, 0.2s color; - - &:hover { - background: $green; - color: $white; - border-color: $green; - } - } - - &.invalid { - input { - border-color: $red; - } - - input:hover, - input:hover + button { - border-color: $red; - } - - input:focus, - input:focus + button { - border-color: $red; - } - - button { - border-color: $red; - - &:hover { - background: $red; - border-color: $red; - } - } - } -} diff --git a/packages/webapp/src/components/LoadingSpinner/LoadingSpinner.js b/packages/webapp/src/components/LoadingSpinner/LoadingSpinner.js deleted file mode 100644 index bac357be..00000000 --- a/packages/webapp/src/components/LoadingSpinner/LoadingSpinner.js +++ /dev/null @@ -1,12 +0,0 @@ -import React from "react"; - -import "./LoadingSpinner.scss"; -import { Loading } from "../../svg"; - -export default function LoadingSpinner() { - return ( -
- -
- ); -} diff --git a/packages/webapp/src/components/LoadingSpinner/LoadingSpinner.scss b/packages/webapp/src/components/LoadingSpinner/LoadingSpinner.scss deleted file mode 100644 index 21eadb3e..00000000 --- a/packages/webapp/src/components/LoadingSpinner/LoadingSpinner.scss +++ /dev/null @@ -1,19 +0,0 @@ -@import "../../variables.scss"; - -@-webkit-keyframes spin { - 100% { - -webkit-transform: rotate(360deg); - transform: rotate(360deg); - } -} -@keyframes spin { - 100% { - -webkit-transform: rotate(360deg); - transform: rotate(360deg); - } -} - -.loading-spinner { - -webkit-animation: spin 1.5s linear infinite; - animation: spin 1.5s linear infinite; -} diff --git a/packages/webapp/src/components/Mailing/Mailing.js b/packages/webapp/src/components/Mailing/Mailing.js deleted file mode 100644 index 1db48c5f..00000000 --- a/packages/webapp/src/components/Mailing/Mailing.js +++ /dev/null @@ -1,76 +0,0 @@ -import React from "react"; -import PropTypes from "prop-types"; -import MailchimpSubscribe from "react-mailchimp-subscribe"; -import classNames from "classnames"; -import "./Mailing.scss"; - -const url = "https://tech.us11.list-manage.com/subscribe/post?u=5df238d9e852f9801b5f2c92e&id=ab6bea4cc2"; - -const CustomForm = ({ status, message, onValidated, light, id }) => { - let email, user; - - const checkboxId = `${id}-check`; - const submitId = `${id}-submit`; - - const submit = () => { - if ((email, user, email.value.indexOf("@") > -1)) { - onValidated({ - EMAIL: email.value, - USER: user.checked ? "Yes" : "No", - }); - } - }; - - return ( -
e.preventDefault()}> - (email = node)} - type="email" - placeholder="Email Address" - validate="true" - aria-labelledby={submitId} - /> -
- (user = node)} type="checkbox" id={checkboxId} /> - -
- - - {status === "sending" &&

sending...

} - {status === "error" &&

} - {status === "success" &&

} -

- ); -}; - -CustomForm.propTypes = { - status: PropTypes.string, - message: PropTypes.string, - onValidated: PropTypes.func, - light: PropTypes.bool, - id: PropTypes.string, -}; - -export default function Mailing({ light, id }) { - return ( - ( - subscribe(formData)} - /> - )} - /> - ); -} - -Mailing.propTypes = { - light: PropTypes.bool, - id: PropTypes.string, -}; diff --git a/packages/webapp/src/components/Mailing/Mailing.scss b/packages/webapp/src/components/Mailing/Mailing.scss deleted file mode 100644 index cb4b9813..00000000 --- a/packages/webapp/src/components/Mailing/Mailing.scss +++ /dev/null @@ -1,109 +0,0 @@ -@import "../../variables.scss"; - -.home-stay-form { - max-width: 342px; - margin: 36px 0 24px; - - .relative { - position: relative; - } - - .message { - font-size: 12px; - margin-top: 10px; - color: $lightGray; - - &.red-text { - color: $red; - } - } - - input[type="email"] { - border-radius: 4px; - box-shadow: 0 2px 4px 0 rgba(90, 94, 91, 0.1); - border: solid 1px #cbd3cd; - padding: 12px 0 12px 16px; - transition: 0.2s border-color; - - &:hover { - border-color: rgb(143, 143, 143); - } - - &:focus { - border-color: $green; - } - } - - input[type="checkbox"] { - width: 20px; - height: 20px; - border-radius: 3px; - border: 1px solid #cbd3cd; - margin-right: 8px; - display: inline-block; - vertical-align: middle; - margin: -2px 8px 0 0; - background-image: url("../../images/green-check.svg"); - background-repeat: no-repeat; - background-size: 28px; - background-position: top -300px center; - - &:checked { - background-position: top -3px center; - } - } - - button { - font-weight: 400; - - @media (min-width: $largebp) { - font-size: 16px; - } - } - - .email-error { - font-size: 12px; - margin-top: 8px; - color: $red; - } -} - -.home-stay-form.light { - input[type="email"] { - box-shadow: 0 2px 4px 0 rgba(90, 94, 91, 0.1); - border-color: $white50; - color: $white; - - &:hover { - border-color: $white; - } - - &:focus { - border-color: $green; - } - } - - input[type="checkbox"] { - border-color: $white50; - } - - label { - color: $white50; - } - - .message { - color: $white30; - - &.red-text { - color: $red; - } - } -} - -.home-form-stay-existing { - margin: 15px 0 20px 0; - - label { - color: $darkGray; - } -} diff --git a/packages/webapp/src/components/Sample/Sample.js b/packages/webapp/src/components/Sample/Sample.js deleted file mode 100644 index ebd5065d..00000000 --- a/packages/webapp/src/components/Sample/Sample.js +++ /dev/null @@ -1,25 +0,0 @@ -import React from "react"; -import PropTypes from "prop-types"; -import classNames from "classnames"; -import "./Sample.scss"; -import { Download } from "../../svg"; - -export default function Sample({ type, url, className }) { - return ( - - ); -} - -Sample.propTypes = { - type: PropTypes.string, - url: PropTypes.string, - className: PropTypes.string, -}; diff --git a/packages/webapp/src/components/Sample/Sample.scss b/packages/webapp/src/components/Sample/Sample.scss deleted file mode 100644 index c9e18a0d..00000000 --- a/packages/webapp/src/components/Sample/Sample.scss +++ /dev/null @@ -1,48 +0,0 @@ -@import "../../variables.scss"; - -.sample { - display: block; - text-align: center; - - a { - transition: 0.2s transform; - display: block; - } - - a:hover { - transform: translateY(5px); - } - - svg { - margin: 0 auto; - width: 34px; - height: 46px; - } -} - -.sample-name { - color: $darkGray; - display: block; - - @media (min-width: $largebp) { - font-size: 18px; - } - - a:hover & { - color: $black; - } -} - -.sample-download { - display: block; - color: $green; - font-size: 13px; - - @media (min-width: $largebp) { - font-size: 14px; - } - - a:hover & { - color: $greenHover; - } -} diff --git a/packages/webapp/src/components/SocialLink/SocialLink.js b/packages/webapp/src/components/SocialLink/SocialLink.js deleted file mode 100644 index 97c34f89..00000000 --- a/packages/webapp/src/components/SocialLink/SocialLink.js +++ /dev/null @@ -1,33 +0,0 @@ -import React from "react"; -import PropTypes from "prop-types"; -import "./SocialLink.scss"; -import { Github, Discord, Twitter } from "../../svg"; - -export default function SocialLink({ icon, title, greenText, url }) { - const getIcon = () => { - if (icon === "github") { - return ; - } else if (icon === "discord") { - return ; - } else if (icon === "twitter") { - return ; - } - }; - - return ( - - {getIcon(icon)} - - {title} - {greenText} - - - ); -} - -SocialLink.propTypes = { - icon: PropTypes.string, - title: PropTypes.node, - greenText: PropTypes.string, - url: PropTypes.string, -}; diff --git a/packages/webapp/src/components/SocialLink/SocialLink.scss b/packages/webapp/src/components/SocialLink/SocialLink.scss deleted file mode 100644 index ea01220a..00000000 --- a/packages/webapp/src/components/SocialLink/SocialLink.scss +++ /dev/null @@ -1,42 +0,0 @@ -@import "../../variables.scss"; - -.social-link { - display: flex; - color: $darkGray; -} - -.social-link-icon { - width: 32px; - transition: 0.2s transform; - - a:hover & { - transform: scale(1.07); - } - - svg { - width: 32px; - height: 32px; - } -} - -.social-link-text { - flex: 1; - margin-left: 16px; - transition: 0.2s color; -} - -.social-link-title { - display: block; -} - -.social-link-green { - color: $green; - font-size: 14px; - display: inline-flex; - - transition: 0.2s color; - - a:hover & { - color: $darkGray; - } -} diff --git a/packages/webapp/src/components/StickyTopMessage/StickyTopMessage.js b/packages/webapp/src/components/StickyTopMessage/StickyTopMessage.js deleted file mode 100644 index 1e7ea57d..00000000 --- a/packages/webapp/src/components/StickyTopMessage/StickyTopMessage.js +++ /dev/null @@ -1,14 +0,0 @@ -// import React from "react"; -// import "./StickyTopMessage.scss"; - -export default function StickyTopMessage() { - return null; // returns nothing, uncomment when we need a new message - // return ( - //
- //

- // We are working on improved performance as part of the upcoming Sia v1.5.0 release. In the meantime, you can try - // other webportals listed at the bottom. - //

- //
- // ); -} diff --git a/packages/webapp/src/components/StickyTopMessage/StickyTopMessage.scss b/packages/webapp/src/components/StickyTopMessage/StickyTopMessage.scss deleted file mode 100644 index 594e404a..00000000 --- a/packages/webapp/src/components/StickyTopMessage/StickyTopMessage.scss +++ /dev/null @@ -1,24 +0,0 @@ -@import "../../variables.scss"; - -.sticky-top-message { - position: sticky; - top: 0; - font-size: 14px; - text-align: center; - padding: 10px; - font-weight: bold; - z-index: 999; - background-color: #fbe6e6; - border-bottom: 1px solid #e65c5c; - color: $red; - - a { - color: $red; - text-decoration: underline; - - &:hover { - color: darken($red, 15%); - transition: color 0.2s ease; - } - } -} diff --git a/packages/webapp/src/components/UploadFile/UploadFile.js b/packages/webapp/src/components/UploadFile/UploadFile.js deleted file mode 100644 index 8cecbb8c..00000000 --- a/packages/webapp/src/components/UploadFile/UploadFile.js +++ /dev/null @@ -1,92 +0,0 @@ -import React, { useState, useRef, useEffect } from "react"; -import PropTypes from "prop-types"; -import "./UploadFile.scss"; -import { LoadingSpinner } from "../"; -import { File, FileCheck, FileError, Copy } from "../../svg"; - -export default function UploadFile({ file, url, status, progress, error }) { - const [copied, setCopied] = useState(false); - const urlRef = useRef(null); - - useEffect(() => { - if (copied) { - const timeoutId = setTimeout(() => { - setCopied(false); - }, 1500); - - return () => clearTimeout(timeoutId); - } - }, [copied, setCopied]); - - const getIcon = () => { - if (status === "uploading" || status === "processing") { - return ; - } else if (status === "error") { - return ; - } else { - return ; - } - }; - - const copyToClipboard = (e) => { - urlRef.current.select(); - document.execCommand("copy"); - e.target.focus(); - setCopied(true); - }; - - const copyText = copied ? "Copied!" : "Copy to clipboard"; - const getProgressText = (progress) => { - if (progress === -1) { - return "Waiting..."; - } else if (progress > 0) { - return `Uploading ${Math.round(progress * 100)}%`; - } - return "Uploading..."; - }; - - return ( -
-
{getIcon()}
-
-

{file.name}

-

- {status === "uploading" && getProgressText(progress)} - {status === "processing" && "Processing..."} - {status === "error" && {error || "Upload failed."}} - {status === "complete" && ( - - {url} - - )} -

-
- {(status === "uploading" || status === "processing") && ( -
- -
- )} - - {status === "complete" && ( -