use location.origin instead of hardcoded https://siasky.net

src/LocationContext.js

@@ -0,0 +1,3 @@
+import { createContext } from "react";
+
+export default createContext(null);

src/components/CodeExamples/CodeExamples.js

@@ -1,10 +1,11 @@
-import React, { useState } from "react";
+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 LocationContext from "../../LocationContext";
 
 SyntaxHighlighter.registerLanguage("javascript", javascript);
 SyntaxHighlighter.registerLanguage("go", go);
@@ -13,6 +14,9 @@ SyntaxHighlighter.registerLanguage("bash", bash);
 
 export default function CodeExamples() {
   const [active, setActive] = useState(1);
+  const location = useContext(LocationContext);
+  const interpolateRegExp = new RegExp("https://siasky.net", "g");
+  const interpolateSnippet = snippet => snippet.replace(interpolateRegExp, location.origin);
 
   return (
     <div className="code-examples">
@@ -34,25 +38,25 @@ export default function CodeExamples() {
       <div className="code-examples-body">
         {active === 1 && (
           <SyntaxHighlighter wrapLines showLineNumbers={true} language="bash" style={Colors}>
-            {snippets.curl}
+            {interpolateSnippet(snippets.curl)}
           </SyntaxHighlighter>
         )}
 
         {active === 2 && (
           <SyntaxHighlighter wrapLines showLineNumbers={true} language="python" style={Colors}>
-            {snippets.python}
+            {interpolateSnippet(snippets.python)}
           </SyntaxHighlighter>
         )}
 
         {active === 3 && (
           <SyntaxHighlighter wrapLines showLineNumbers={true} language="javascript" style={Colors}>
-            {snippets.node}
+            {interpolateSnippet(snippets.node)}
           </SyntaxHighlighter>
         )}
 
         {active === 4 && (
           <SyntaxHighlighter wrapLines showLineNumbers={true} language="go" style={Colors}>
-            {snippets.go}
+            {interpolateSnippet(snippets.go)}
           </SyntaxHighlighter>
         )}
       </div>

src/components/HomeUpload/HomeUpload.js

@@ -1,4 +1,4 @@
-import React, { Component } from "react";
+import React, { useState, useContext } from "react";
 import classNames from "classnames";
 import Dropzone from "react-dropzone";
 import Reveal from "react-reveal/Reveal";
@@ -6,30 +6,28 @@ import shortid from "shortid";
 import { Button, UploadFile } from "../";
 import { Deco3, Deco4, Deco5, Folder, DownArrow } from "../../svg";
 import "./HomeUpload.scss";
+import LocationContext from "../../LocationContext";
 
-export default class HomeUpload extends Component {
+export default function HomeUpload() {
-  state = { files: [] };
+  const [files, setFiles] = useState([]);
+  const location = useContext(LocationContext);
 
-  handleDrop = async acceptedFiles => {
+  const handleDrop = async acceptedFiles => {
-    this.setState({
+    setFiles(previousFiles => [...acceptedFiles.map(file => ({ file, status: "uploading" })), ...previousFiles]);
-      files: [...acceptedFiles.map(file => ({ file, status: "uploading" })), ...this.state.files]
-    });
 
     const onComplete = (file, status, skylink) => {
-      this.setState(state => {
+      setFiles(previousFiles => {
-        const index = state.files.findIndex(f => f.file === file);
+        const index = previousFiles.findIndex(f => f.file === file);
 
-        return {
+        return [
-          files: [
+          ...previousFiles.slice(0, index),
-            ...state.files.slice(0, index),
+          {
-            {
+            ...previousFiles[index],
-              ...state.files[index],
+            status,
-              status,
+            url: `${location.origin}/${skylink}`
-              url: `https://siasky.net/${skylink}`
+          },
-            },
+          ...previousFiles.slice(index + 1)
-            ...state.files.slice(index + 1)
+        ];
-          ]
-        };
       });
     };
 
@@ -39,7 +37,7 @@ export default class HomeUpload extends Component {
         fd.append("file", file);
 
         const uuid = shortid.generate();
-        const response = await fetch(`/skynet/skyfile/${uuid}`, { method: "POST", body: fd });
+        const response = await fetch(`${location.origin}/skynet/skyfile/${uuid}`, { method: "POST", body: fd });
         const { skylink } = await response.json();
 
         onComplete(file, "complete", skylink);
@@ -49,7 +47,7 @@ export default class HomeUpload extends Component {
     });
   };
 
-  handleSkylink = event => {
+  const handleSkylink = event => {
     event.preventDefault();
 
     const skylink = event.target.skylink.value.replace("sia://", "");
@@ -59,71 +57,69 @@ export default class HomeUpload extends Component {
     }
   };
 
-  render() {
+  return (
-    return (
+    <Reveal effect="active">
-      <Reveal effect="active">
+      <div className="home-upload">
-        <div className="home-upload">
+        <div className="home-upload-white fadeInUp delay4">
-          <div className="home-upload-white fadeInUp delay4">
+          <div className="home-upload-split">
-            <div className="home-upload-split">
+            <div className="home-upload-box ">
-              <div className="home-upload-box ">
+              <Dropzone onDrop={handleDrop}>
-                <Dropzone onDrop={acceptedFiles => this.handleDrop(acceptedFiles)}>
+                {({ getRootProps, getInputProps, isDragActive }) => (
-                  {({ getRootProps, getInputProps, isDragActive }) => (
+                  <>
-                    <>
+                    <div
-                      <div
+                      className={classNames("home-upload-dropzone", {
-                        className={classNames("home-upload-dropzone", {
+                        "drop-active": isDragActive
-                          "drop-active": isDragActive
+                      })}
-                        })}
+                      {...getRootProps()}
-                        {...getRootProps()}
+                    >
-                      >
+                      <span className="home-upload-text">
-                        <span className="home-upload-text">
+                        <h3>Upload your Files</h3>
-                          <h3>Upload your Files</h3>
+                        Drop your files here to pin to Skynet
-                          Drop your files here to pin to Skynet
+                      </span>
-                        </span>
+                      <Button iconLeft>
-                        <Button iconLeft>
+                        <Folder />
-                          <Folder />
+                        Browse
-                          Browse
+                      </Button>
-                        </Button>
+                    </div>
-                      </div>
+                    <input {...getInputProps()} className="offscreen" />
-                      <input {...getInputProps()} className="offscreen" />
+                  </>
-                    </>
+                )}
-                  )}
+              </Dropzone>
-                </Dropzone>
-              </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="home-upload-retrieve-form" onSubmit={this.handleSkylink}>
-                    <input name="skylink" type="text" placeholder="sia://" aria-labelledby="skylink-retrieve-title" />
-                    <button type="submit" aria-label="Retrieve file">
-                      <DownArrow />
-                    </button>
-                  </form>
-                </div>
-              </div>
             </div>
 
-            {this.state.files.length > 0 && (
+            <div className="home-upload-retrieve">
-              <div className="home-uploaded-files">
+              <div className="home-upload-text">
-                {this.state.files.map((file, i) => {
+                <h3 id="skylink-retrieve-title">Have a Skylink?</h3>
-                  return <UploadFile key={i} {...file} />;
+                <p>Paste the link to retrieve your file</p>
-                })}
+
+                <form className="home-upload-retrieve-form" onSubmit={handleSkylink}>
+                  <input name="skylink" type="text" placeholder="sia://" aria-labelledby="skylink-retrieve-title" />
+                  <button type="submit" aria-label="Retrieve file">
+                    <DownArrow />
+                  </button>
+                </form>
               </div>
-            )}
+            </div>
           </div>
 
-          <p className="bottom-text fadeInUp delay5">
+          {files.length > 0 && (
-            Upon uploading a file, Skynet generates a 46 byte link called a <strong>Skylink</strong>. This link can then
+            <div className="home-uploaded-files">
-            be shared with anyone to retrieve the file on any Skynet Webportal.
+              {files.map((file, i) => {
-          </p>
+                return <UploadFile key={i} {...file} />;
-
+              })}
-          <Deco3 className="deco-3 fadeInUp delay6" />
+            </div>
-          <Deco4 className="deco-4 fadeInUp delay6" />
+          )}
-          <Deco5 className="deco-5 fadeInUp delay6" />
         </div>
-      </Reveal>
+
-    );
+        <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" />
+      </div>
+    </Reveal>
+  );
 }

src/pages/index.js

@@ -2,12 +2,13 @@ import React from "react";
 import SEO from "../components/seo";
 import { App } from "../components";
 import "../global.scss";
+import LocationContext from "../LocationContext";
 
-const IndexPage = () => (
+const IndexPage = ({ location }) => (
-  <>
+  <LocationContext.Provider value={location}>
     <SEO />
     <App />
-  </>
+  </LocationContext.Provider>
 );
 
 export default IndexPage;