diff --git a/packages/website/src/components/Navigation/Navigation.js b/packages/website/src/components/Navigation/Navigation.js index aacc5d72..5e0c5ec4 100644 --- a/packages/website/src/components/Navigation/Navigation.js +++ b/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 && ( <> - + Log in - + Sign up )} {showAccountNavigation && ( - + My account )} @@ -142,18 +144,18 @@ const Navigation = ({ mode, uri }) => {
{showLoginNavigation && ( <> - + Log in - + Sign up )} {showAccountNavigation && ( - + My account )} diff --git a/packages/website/src/components/Uploader/Uploader.js b/packages/website/src/components/Uploader/Uploader.js index e44a5060..f46e2669 100644 --- a/packages/website/src/components/Uploader/Uploader.js +++ b/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 = () => ( - - Sign up - -); +const RegistrationLink = () => { + const accountsUrl = useAccountsUrl(); -const LogInLink = () => ( - - Log in - -); + return ( + + Sign up + + ); +}; + +const LogInLink = () => { + const accountsUrl = useAccountsUrl(); + + return ( + + Log in + + ); +}; const Uploader = () => { const [mode, setMode] = React.useState("file"); @@ -190,8 +199,8 @@ const Uploader = () => { {disabledComponent && (
-
-
+
+

or for free

diff --git a/packages/website/src/components/Uploader/UploaderElement.js b/packages/website/src/components/Uploader/UploaderElement.js index 70557b63..e52b4028 100644 --- a/packages/website/src/components/Uploader/UploaderElement.js +++ b/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) { diff --git a/packages/website/src/services/skynetClient.js b/packages/website/src/services/skynetClient.js new file mode 100644 index 00000000..55f19f1a --- /dev/null +++ b/packages/website/src/services/skynetClient.js @@ -0,0 +1,3 @@ +import { SkynetClient } from "skynet-js"; + +export default new SkynetClient(process.env.GATSBY_API_URL); diff --git a/packages/website/src/services/useAccountsUrl.js b/packages/website/src/services/useAccountsUrl.js new file mode 100644 index 00000000..3f8832f6 --- /dev/null +++ b/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; +}