programatically create accounts url

packages/website/src/components/Navigation/Navigation.js

@@ -3,6 +3,7 @@ import PropTypes from "prop-types";
 import Link from "../Link";
 import classnames from "classnames";
 import useAccounts from "../../services/useAccounts";
+import useAccountsUrl from "../../services/useAccountsUrl";
 import { LogoWhiteText, LogoBlackText, MenuMobile, MenuMobileClose, DiscordSmall } from "../Icons";
 import { useWindowSize, useWindowScroll } from "react-use";
 
@@ -25,6 +26,7 @@ const Navigation = ({ mode, uri }) => {
   const windowSize = useWindowSize();
   const isWindowTop = useWindowTop();
   const { data: accounts } = useAccounts();
+  const accountsUrl = useAccountsUrl();
 
   React.useEffect(() => {
     setOpen(false);
@@ -88,18 +90,18 @@ const Navigation = ({ mode, uri }) => {
 
             {showLoginNavigation && (
               <>
-                <Link href="https://account.siasky.net" className="button-link-primary">
+                <Link href={`${accountsUrl}/auth/login`} className="button-link-primary">
                   Log in
                 </Link>
 
-                <Link href="https://account.siasky.net/auth/registration" className="button-primary">
+                <Link href={`${accountsUrl}/auth/registration`} className="button-primary">
                   Sign up
                 </Link>
               </>
             )}
 
             {showAccountNavigation && (
-              <Link href="https://account.siasky.net" className="button-primary">
+              <Link href={accountsUrl} className="button-primary">
                 My account
               </Link>
             )}
@@ -142,18 +144,18 @@ const Navigation = ({ mode, uri }) => {
             <div className="flex items-center justify-center px-4 space-x-6">
               {showLoginNavigation && (
                 <>
-                  <Link href="https://account.siasky.net" className="button-secondary-light">
+                  <Link href={`${accountsUrl}/auth/login`} className="button-secondary-light">
                     Log in
                   </Link>
 
-                  <Link href="https://account.siasky.net/auth/registration" className="button-primary">
+                  <Link href={`${accountsUrl}/auth/registration`} className="button-primary">
                     Sign up
                   </Link>
                 </>
               )}
 
               {showAccountNavigation && (
-                <Link href="https://account.siasky.net" className="button-primary">
+                <Link href={accountsUrl} className="button-primary">
                   My account
                 </Link>
               )}

packages/website/src/components/Uploader/Uploader.js

@@ -6,6 +6,7 @@ import path from "path-browserify";
 import { useDropzone } from "react-dropzone";
 import { nanoid } from "nanoid";
 import useAccounts from "../../services/useAccounts";
+import useAccountsUrl from "../../services/useAccountsUrl";
 import Link from "../Link";
 import UploaderElement from "./UploaderElement";
 
@@ -20,23 +21,31 @@ const getRootDirectory = (file) => {
   return path.normalize(dir).slice(root.length).split(path.sep)[0];
 };
 
-const RegistrationLink = () => (
-  <Link
-    href="https://account.siasky.net/auth/registration"
-    className="uppercase underline-primary hover:text-primary transition-colors duration-200"
-  >
-    Sign up
-  </Link>
-);
+const RegistrationLink = () => {
+  const accountsUrl = useAccountsUrl();
 
-const LogInLink = () => (
-  <Link
-    href="https://account.siasky.net/auth/login"
-    className="uppercase underline-primary hover:text-primary transition-colors duration-200"
-  >
-    Log in
-  </Link>
-);
+  return (
+    <Link
+      href={`${accountsUrl}/auth/registration`}
+      className="uppercase underline-primary hover:text-primary transition-colors duration-200"
+    >
+      Sign up
+    </Link>
+  );
+};
+
+const LogInLink = () => {
+  const accountsUrl = useAccountsUrl();
+
+  return (
+    <Link
+      href={`${accountsUrl}/auth/login`}
+      className="uppercase underline-primary hover:text-primary transition-colors duration-200"
+    >
+      Log in
+    </Link>
+  );
+};
 
 const Uploader = () => {
   const [mode, setMode] = React.useState("file");
@@ -190,8 +199,8 @@ const Uploader = () => {
 
       {disabledComponent && (
         <div className="absolute inset-0 bg-palette-500 bg-opacity-90 rounded-lg">
-          <div class="flex h-full">
-            <div class="m-auto">
+          <div className="flex h-full">
+            <div className="m-auto">
               <h4 className="font-light text-palette-100 text-lg mt-2 text-center">
                 <LogInLink /> or <RegistrationLink /> for free
               </h4>

packages/website/src/components/Uploader/UploaderElement.js

@@ -5,9 +5,9 @@ import bytes from "bytes";
 import { getReasonPhrase, StatusCodes } from "http-status-codes";
 import copy from "copy-text-to-clipboard";
 import path from "path-browserify";
-import { SkynetClient } from "skynet-js";
 import { useTimeoutFn } from "react-use";
 import ms from "ms";
+import skynetClient from "../../services/skynetClient";
 import Link from "../Link";
 
 const getFilePath = (file) => file.webkitRelativePath || file.path || file.name;
@@ -55,8 +55,6 @@ const createUploadErrorMessage = (error) => {
   return `Critical error, please refresh the application and try again. ${error.message}`;
 };
 
-const client = new SkynetClient(process.env.GATSBY_API_URL);
-
 export default function UploaderElement({ onUploadStateChange, upload }) {
   const [copied, setCopied] = React.useState(false);
   const [, , reset] = useTimeoutFn(() => setCopied(false), ms("3 seconds"));
@@ -87,12 +85,12 @@ export default function UploaderElement({ onUploadStateChange, upload }) {
             const directory = files.reduce((acc, file) => ({ ...acc, [getRelativeFilePath(file)]: file }), {});
             const name = encodeURIComponent(upload.file.name);
 
-            response = await client.uploadDirectory(directory, name, { onUploadProgress });
+            response = await skynetClient.uploadDirectory(directory, name, { onUploadProgress });
           } else {
-            response = await client.uploadFile(upload.file, { onUploadProgress });
+            response = await skynetClient.uploadFile(upload.file, { onUploadProgress });
           }
 
-          const url = await client.getSkylinkUrl(response.skylink, { subdomain: upload.mode === "directory" });
+          const url = await skynetClient.getSkylinkUrl(response.skylink, { subdomain: upload.mode === "directory" });
 
           onUploadStateChange(upload.id, { status: "complete", url });
         } catch (error) {

packages/website/src/services/skynetClient.js

@@ -0,0 +1,3 @@
+import { SkynetClient } from "skynet-js";
+
+export default new SkynetClient(process.env.GATSBY_API_URL);

packages/website/src/services/useAccountsUrl.js

@@ -0,0 +1,18 @@
+import * as React from "react";
+import skynetClient from "./skynetClient";
+
+export default function useAccountsUrl() {
+  const [url, setUrl] = React.useState("");
+
+  React.useEffect(() => {
+    (async function resolve() {
+      const portalUrl = new URL(await skynetClient.portalUrl());
+
+      portalUrl.host = `account.${portalUrl.host}`;
+
+      setUrl(portalUrl.toString());
+    })();
+  }, [setUrl]);
+
+  return url;
+}