From 4c4e7540ea2aa9da2493bbe651885ccf35c77845 Mon Sep 17 00:00:00 2001 From: Tanmoy Basak Anjan Date: Wed, 18 Aug 2021 19:27:57 +0600 Subject: [PATCH 01/34] Settings plan page UI (#1182) * plan page ready * plans data * plans page * ready and responsive * lingui extract * use npm regisry * pull from npm * use new api client * lingui extract * update api client * lingui extract * initial stab * lingui extract * create barebones gaming app * lingui extract * update readme * lingui extract * Apply suggestions from code review Co-authored-by: Ryan Noble * lingui extract * rename * merge latest gaming * lingui extract * wire up basic products list and Product info * lingui extract * improve text formatting * remove unused imports * remove unused imports * remove billing from files for now * fix navigation and remove settings Co-authored-by: GitHub Actions Co-authored-by: Thibaut Sardan Co-authored-by: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com> Co-authored-by: Michael Yankelev Co-authored-by: Michael Yankelev <12774278+FSM1@users.noreply.github.com> Co-authored-by: Ryan Noble --- .../src/Icons/icons/SubscriptionPlan.icon.tsx | 7 + packages/common-components/src/Icons/index.ts | 1 + .../src/Icons/svgs/profile.svg | 2 +- .../src/Icons/svgs/subscription-plan.svg | 3 + .../files-ui/src/Components/FilesRoutes.tsx | 11 +- .../src/Components/Modules/Settings/Plan.tsx | 156 ------- .../Modules/Settings/Products/ProductInfo.tsx | 101 ++++ .../Modules/Settings/Products/Products.tsx | 126 +++++ .../{ => Profile}/LanguageSelection.tsx | 4 +- .../{Profile.tsx => Profile/index.tsx} | 8 +- .../SavedBrowsers/BrowserPanel.tsx | 6 +- .../{ => Security}/SavedBrowsers/index.tsx | 4 +- .../Modules/Settings/Security/index.tsx | 2 +- .../SubscriptionPlan/CurrentProduct.tsx | 148 ++++++ .../Settings/SubscriptionPlan/index.tsx | 11 + .../src/Components/Modules/Settings/index.tsx | 12 +- .../src/Components/Pages/PlansPage.tsx | 8 + packages/files-ui/src/locales/de/messages.po | 39 +- packages/files-ui/src/locales/en/messages.po | 39 +- packages/files-ui/src/locales/es/messages.po | 39 +- packages/files-ui/src/locales/fr/messages.mo | Bin 17948 -> 0 bytes packages/files-ui/src/locales/fr/messages.po | 41 +- packages/files-ui/src/locales/no/messages.po | 39 +- .../gaming-ui/src/Components/GamingRoutes.tsx | 35 +- .../src/Components/Layouts/AppHeader.tsx | 2 +- .../src/Components/Layouts/AppNav.tsx | 25 +- .../Modules/Login/PasswordlessEmail.tsx | 296 ++++++++++++ .../src/Components/Modules/Login/index.tsx | 436 ++++++++++++++++++ .../Modules/Products/ProductInfo.tsx | 104 +++++ .../src/Components/Modules/Products/index.tsx | 127 +++++ .../src/Components/Pages/BillingPage.tsx | 141 ++++++ .../src/Components/Pages/LoginPage.tsx | 2 +- .../src/Contexts/GamingApiContext.tsx | 8 +- packages/gaming-ui/src/locales/en/messages.po | 30 ++ 34 files changed, 1789 insertions(+), 224 deletions(-) create mode 100644 packages/common-components/src/Icons/icons/SubscriptionPlan.icon.tsx create mode 100644 packages/common-components/src/Icons/svgs/subscription-plan.svg delete mode 100644 packages/files-ui/src/Components/Modules/Settings/Plan.tsx create mode 100644 packages/files-ui/src/Components/Modules/Settings/Products/ProductInfo.tsx create mode 100644 packages/files-ui/src/Components/Modules/Settings/Products/Products.tsx rename packages/files-ui/src/Components/Modules/Settings/{ => Profile}/LanguageSelection.tsx (93%) rename packages/files-ui/src/Components/Modules/Settings/{Profile.tsx => Profile/index.tsx} (98%) rename packages/files-ui/src/Components/Modules/Settings/{ => Security}/SavedBrowsers/BrowserPanel.tsx (97%) rename packages/files-ui/src/Components/Modules/Settings/{ => Security}/SavedBrowsers/index.tsx (91%) create mode 100644 packages/files-ui/src/Components/Modules/Settings/SubscriptionPlan/CurrentProduct.tsx create mode 100644 packages/files-ui/src/Components/Modules/Settings/SubscriptionPlan/index.tsx create mode 100644 packages/files-ui/src/Components/Pages/PlansPage.tsx delete mode 100644 packages/files-ui/src/locales/fr/messages.mo create mode 100644 packages/gaming-ui/src/Components/Modules/Login/PasswordlessEmail.tsx create mode 100644 packages/gaming-ui/src/Components/Modules/Login/index.tsx create mode 100644 packages/gaming-ui/src/Components/Modules/Products/ProductInfo.tsx create mode 100644 packages/gaming-ui/src/Components/Modules/Products/index.tsx create mode 100644 packages/gaming-ui/src/Components/Pages/BillingPage.tsx diff --git a/packages/common-components/src/Icons/icons/SubscriptionPlan.icon.tsx b/packages/common-components/src/Icons/icons/SubscriptionPlan.icon.tsx new file mode 100644 index 0000000000..6db4b2ae5d --- /dev/null +++ b/packages/common-components/src/Icons/icons/SubscriptionPlan.icon.tsx @@ -0,0 +1,7 @@ +import * as React from "react" +import createSvgIcon from "../createSvgIcon" +import { ReactComponent as SubscriptionSvg } from "../svgs/subscription-plan.svg" + +export { SubscriptionSvg } + +export default createSvgIcon() diff --git a/packages/common-components/src/Icons/index.ts b/packages/common-components/src/Icons/index.ts index 54cdc77045..cd920a319e 100644 --- a/packages/common-components/src/Icons/index.ts +++ b/packages/common-components/src/Icons/index.ts @@ -64,6 +64,7 @@ export { default as SettingIcon, SettingSvg } from "./icons/Setting.icon" export { default as ShareAltIcon, ShareAltSvg } from "./icons/ShareAlt.icon" export { default as StarIcon, StarSvg } from "./icons/Star.icon" export { default as SunIcon, SunSvg } from "./icons/Sun.icon" +export { default as SubscriptionPlanIcon, SubscriptionSvg } from "./icons/SubscriptionPlan.icon" export { default as TableIcon, TableSvg } from "./icons/Table.icon" export { default as UpdateIcon, UpdateSvg } from "./icons/Update.icon" export { default as UploadIcon, UploadSvg } from "./icons/Upload.icon" diff --git a/packages/common-components/src/Icons/svgs/profile.svg b/packages/common-components/src/Icons/svgs/profile.svg index 30175f0200..996d119f4d 100644 --- a/packages/common-components/src/Icons/svgs/profile.svg +++ b/packages/common-components/src/Icons/svgs/profile.svg @@ -1 +1 @@ - \ No newline at end of file + diff --git a/packages/common-components/src/Icons/svgs/subscription-plan.svg b/packages/common-components/src/Icons/svgs/subscription-plan.svg new file mode 100644 index 0000000000..b08a23e621 --- /dev/null +++ b/packages/common-components/src/Icons/svgs/subscription-plan.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/files-ui/src/Components/FilesRoutes.tsx b/packages/files-ui/src/Components/FilesRoutes.tsx index 55525e0995..746eabc77a 100644 --- a/packages/files-ui/src/Components/FilesRoutes.tsx +++ b/packages/files-ui/src/Components/FilesRoutes.tsx @@ -10,6 +10,7 @@ import PurchasePlanPage from "./Pages/PurchasePlanPage" import { useThresholdKey } from "../Contexts/ThresholdKeyContext" import ShareFilesPage from "./Pages/SharedFilesPage" import SharedFoldersOverview from "./Modules/FileBrowsers/SharedFoldersOverview" +import PlansPage from "./Pages/PlansPage" export const SETTINGS_BASE = "/settings" export const ROUTE_LINKS = { @@ -24,6 +25,7 @@ export const ROUTE_LINKS = { Settings: `${SETTINGS_BASE}/:path`, SettingsDefault: `${SETTINGS_BASE}`, PurchasePlan: "/purchase", + Plans: "/plans", UserSurvey: "https://shrl.ink/kmAL", GeneralFeedbackForm: "https://shrl.ink/gvVJ", SharedFolders: "/shared-overview", @@ -36,7 +38,7 @@ export const ROUTE_LINKS = { } } -export const SETTINGS_PATHS = ["profile", "plan", "security"] as const +export const SETTINGS_PATHS = ["profile", "security", "plan"] as const export type SettingsPath = typeof SETTINGS_PATHS[number] const FilesRoutes = () => { @@ -92,6 +94,13 @@ const FilesRoutes = () => { component={SettingsPage} redirectPath={ROUTE_LINKS.Landing} /> + - createStyles({ - container: { - marginTop: 20, - marginBottom: 160 - }, - bodyContainer: { - padding: `${theme.constants.generalUnit * 3}px 0px`, - borderBottom: `1px solid ${theme.palette.additional["gray"][4]}`, - [theme.breakpoints.down("md")]: { - borderBottom: "none" - } - }, - storageBox: { - maxWidth: 400 - }, - margins: { - marginBottom: theme.constants.generalUnit * 2 - }, - essentials: { - fontWeight: 600, - marginBottom: theme.constants.generalUnit * 2 - }, - essentialContainer: { - display: "flex", - alignItems: "center", - justifyContent: "space-between", - [theme.breakpoints.down("md")]: { - flexFlow: "column", - alignItems: "flex-start", - width: 300 - } - }, - subtitle: { - color: theme.palette.additional["gray"][8], - [theme.breakpoints.down("md")]: { - fontSize: 16, - lineHeight: "22px" - } - }, - spaceUsedBox: { - [theme.breakpoints.down("md")]: { - marginBottom: theme.constants.generalUnit, - width: "inherit" - } - }, - spaceUsedMargin: { - marginBottom: theme.constants.generalUnit - }, - changePlanButton: { - width: "inherit" - }, - link: { - textDecoration: "none" - } - }) -) - -const PlanView: React.FC = () => { - const classes = useStyles() - const { storageSummary } = useFiles() - - return ( - - -
-
-
- - Storage Plan - - - - Lorem ipsum aenean et rutrum magna. Morbi nec placerat erat. - Nunc elementum sed libero sit amet convallis. Quisque non arcu - vitae ex fringilla molestie. - - -
-
- - Essentials - Free - -
- {storageSummary && -
- {`${formatBytes(storageSummary.used_storage, 2)} of ${formatBytes( - storageSummary.total_storage, 2 - )} used`} - -
- } - - - -
-
-
-
- - - ) -} - -export default PlanView diff --git a/packages/files-ui/src/Components/Modules/Settings/Products/ProductInfo.tsx b/packages/files-ui/src/Components/Modules/Settings/Products/ProductInfo.tsx new file mode 100644 index 0000000000..109cbadbb0 --- /dev/null +++ b/packages/files-ui/src/Components/Modules/Settings/Products/ProductInfo.tsx @@ -0,0 +1,101 @@ +import React from "react" +import { Divider, Typography } from "@chainsafe/common-components" +import { makeStyles, createStyles } from "@chainsafe/common-theme" +import { CSFTheme } from "../../../../Themes/types" +import clsx from "clsx" +import { Trans } from "@lingui/macro" +import { Product } from "@chainsafe/files-api-client" + +const useStyles = makeStyles(({ constants, palette, typography }: CSFTheme) => + createStyles({ + container: { + border: "1px solid", + borderColor: palette.additional["gray"][3], + color: "inherit", + padding: `${constants.generalUnit * 4}px ${constants.generalUnit * 4}px ${constants.generalUnit * 5}px` + }, + planFor: { + fontSize: 18, + color: "inherit" + }, + title: { + fontSize: 30, + margin: `${constants.generalUnit * 2}px 0px ${constants.generalUnit * 4}px` + }, + feature: { + margin: `${constants.generalUnit * 0.5}px 0px` + }, + price: { + fontWeight: "bold", + margin: `${constants.generalUnit * 3}px 0px ${constants.generalUnit * 6}px` + }, + buttonLink: { + outline: "none", + textDecoration: "underline", + cursor: "pointer", + textAlign: "left", + ...typography.body1, + fontWeight: "bold" + }, + divider: { + margin: `${constants.generalUnit * 3}px 0px` + } + }) +) + +interface ProductInfoProps { + product: Product + className: string +} + +const ProductInfo = ({ product, className }: ProductInfoProps) => { + const classes = useStyles() + const { description, name } = product + // const { tax_behavior, recurring, type, currency, unit_amount } = prices + return ( +
+ + + + + {/* not adding translations to titles */} + {name} + + + {description} + + {/* + {t`$${billingPeriod === "monthly" ? monthly : yearly} USD/${billingPeriod === "monthly" ? "month" : "year"}`} + */} +
+ Try for 7 days +
+ +
+ Purchase with card +
+
+ ) +} + +export default ProductInfo \ No newline at end of file diff --git a/packages/files-ui/src/Components/Modules/Settings/Products/Products.tsx b/packages/files-ui/src/Components/Modules/Settings/Products/Products.tsx new file mode 100644 index 0000000000..70f5a37c68 --- /dev/null +++ b/packages/files-ui/src/Components/Modules/Settings/Products/Products.tsx @@ -0,0 +1,126 @@ +import React, { useState } from "react" +import { makeStyles, createStyles } from "@chainsafe/common-theme" +import { CSFTheme } from "../../../../Themes/types" +import ProductInfo from "./ProductInfo" +import { ArrowLeftIcon, Link, RadioInput, Typography } from "@chainsafe/common-components" +import { t, Trans } from "@lingui/macro" +import { ROUTE_LINKS } from "../../../FilesRoutes" +import { useFilesApi } from "../../../../Contexts/FilesApiContext" +import { Product } from "@chainsafe/files-api-client" +import { useEffect } from "react" + +const useStyles = makeStyles(({ constants, palette, breakpoints }: CSFTheme) => + createStyles({ + root: { + [breakpoints.down("md")]: { + padding: `${constants.generalUnit * 4}px ${constants.generalUnit * 2}px` + } + }, + container: { + display: "grid", + gridColumnGap: constants.generalUnit * 2, + gridTemplateColumns: "1fr 1fr 1fr", + [breakpoints.down("md")]: { + gridTemplateColumns: "1fr 1fr", + gridRowGap: constants.generalUnit * 2 + }, + [breakpoints.down("sm")]: { + gridTemplateColumns: "1fr", + gridRowGap: constants.generalUnit * 2 + } + }, + heading: { + marginBottom: constants.generalUnit * 4, + [breakpoints.down("md")]: { + marginBottom: constants.generalUnit * 2 + } + }, + backIcon: { + fontSize: 10, + marginRight: constants.generalUnit + }, + planSettings: { + display: "flex", + justifyContent: "space-between", + margin: `${constants.generalUnit * 2}px 0px ${constants.generalUnit * 5}px`, + alignItems: "center", + [breakpoints.down("sm")]: { + flexDirection: "column", + alignItems: "flex-start", + margin: `${constants.generalUnit * 2}px 0px ${constants.generalUnit * 2}px` + } + }, + planRadios: { + display: "flex", + alignItems: "center" + }, + plan1: { + backgroundColor: palette.additional["gray"][3], + color: palette.additional["gray"][9] + }, + plan2: { + backgroundColor: palette.additional["blue"][7], + color: palette.additional["gray"][1] + }, + plan3: { + backgroundColor: palette.additional["gray"][9], + color: palette.additional["gray"][1] + } + }) +) + +const Products = () => { + const classes = useStyles() + const [billingPeriod, setBillingPeriod] = useState<"monthly" | "yearly">("monthly") + const { filesApiClient } = useFilesApi() + const [products] = useState([]) + + useEffect(() => { + filesApiClient.getAllProducts().then(prods => { + console.log(prods) + // setProducts(prods) + }).catch(console.error) + }, [filesApiClient]) + + return ( +
+ + Upgrade your plan + +
+ + + Back to plan settings + +
+ setBillingPeriod("monthly")} + checked={billingPeriod === "monthly"} + /> + setBillingPeriod("yearly")} + checked={billingPeriod === "yearly"} + /> +
+
+
+ {products.map(p => )} +
+
+ + ) +} + +export default Products \ No newline at end of file diff --git a/packages/files-ui/src/Components/Modules/Settings/LanguageSelection.tsx b/packages/files-ui/src/Components/Modules/Settings/Profile/LanguageSelection.tsx similarity index 93% rename from packages/files-ui/src/Components/Modules/Settings/LanguageSelection.tsx rename to packages/files-ui/src/Components/Modules/Settings/Profile/LanguageSelection.tsx index 4b29484a9e..c9d697684b 100644 --- a/packages/files-ui/src/Components/Modules/Settings/LanguageSelection.tsx +++ b/packages/files-ui/src/Components/Modules/Settings/Profile/LanguageSelection.tsx @@ -1,8 +1,8 @@ import React, { useMemo } from "react" -import { useLanguageContext } from "../../../Contexts/LanguageContext" +import { useLanguageContext } from "../../../../Contexts/LanguageContext" import { MenuDropdown } from "@chainsafe/common-components" import { createStyles, makeStyles } from "@chainsafe/common-theme" -import { CSFTheme } from "../../../Themes/types" +import { CSFTheme } from "../../../../Themes/types" const useStyles = makeStyles( ({ constants, palette }: CSFTheme) => { diff --git a/packages/files-ui/src/Components/Modules/Settings/Profile.tsx b/packages/files-ui/src/Components/Modules/Settings/Profile/index.tsx similarity index 98% rename from packages/files-ui/src/Components/Modules/Settings/Profile.tsx rename to packages/files-ui/src/Components/Modules/Settings/Profile/index.tsx index 4ebff58087..048b75e2a8 100644 --- a/packages/files-ui/src/Components/Modules/Settings/Profile.tsx +++ b/packages/files-ui/src/Components/Modules/Settings/Profile/index.tsx @@ -18,13 +18,13 @@ import { } from "@chainsafe/common-theme" import { LockIcon, CopyIcon } from "@chainsafe/common-components" import { Form, useFormik, FormikProvider } from "formik" -import { useUser } from "../../../Contexts/UserContext" +import { useUser } from "../../../../Contexts/UserContext" import { t, Trans } from "@lingui/macro" -import { centerEllipsis } from "../../../Utils/Helpers" -import { CSFTheme } from "../../../Themes/types" +import { centerEllipsis } from "../../../../Utils/Helpers" +import { CSFTheme } from "../../../../Themes/types" import clsx from "clsx" import LanguageSelection from "./LanguageSelection" -import { useThresholdKey } from "../../../Contexts/ThresholdKeyContext" +import { useThresholdKey } from "../../../../Contexts/ThresholdKeyContext" import EthCrypto from "eth-crypto" const useStyles = makeStyles(({ constants, breakpoints, palette, typography }: CSFTheme) => diff --git a/packages/files-ui/src/Components/Modules/Settings/SavedBrowsers/BrowserPanel.tsx b/packages/files-ui/src/Components/Modules/Settings/Security/SavedBrowsers/BrowserPanel.tsx similarity index 97% rename from packages/files-ui/src/Components/Modules/Settings/SavedBrowsers/BrowserPanel.tsx rename to packages/files-ui/src/Components/Modules/Settings/Security/SavedBrowsers/BrowserPanel.tsx index c2abd50343..04abfd4377 100644 --- a/packages/files-ui/src/Components/Modules/Settings/SavedBrowsers/BrowserPanel.tsx +++ b/packages/files-ui/src/Components/Modules/Settings/Security/SavedBrowsers/BrowserPanel.tsx @@ -3,13 +3,13 @@ import { makeStyles, createStyles } from "@chainsafe/common-theme" -import { CSFTheme } from "../../../../Themes/types" +import { CSFTheme } from "../../../../../Themes/types" import { Button, ExpansionPanel, Typography } from "@chainsafe/common-components" import clsx from "clsx" import { Trans } from "@lingui/macro" import dayjs from "dayjs" -import { BrowserShare, useThresholdKey } from "../../../../Contexts/ThresholdKeyContext" -import CustomModal from "../../../Elements/CustomModal" +import { BrowserShare, useThresholdKey } from "../../../../../Contexts/ThresholdKeyContext" +import CustomModal from "../../../../Elements/CustomModal" const useStyles = makeStyles(({ palette, constants, animation, breakpoints }: CSFTheme) => createStyles({ diff --git a/packages/files-ui/src/Components/Modules/Settings/SavedBrowsers/index.tsx b/packages/files-ui/src/Components/Modules/Settings/Security/SavedBrowsers/index.tsx similarity index 91% rename from packages/files-ui/src/Components/Modules/Settings/SavedBrowsers/index.tsx rename to packages/files-ui/src/Components/Modules/Settings/Security/SavedBrowsers/index.tsx index d786f7ab3a..0df8d81383 100644 --- a/packages/files-ui/src/Components/Modules/Settings/SavedBrowsers/index.tsx +++ b/packages/files-ui/src/Components/Modules/Settings/Security/SavedBrowsers/index.tsx @@ -3,10 +3,10 @@ import { makeStyles, createStyles } from "@chainsafe/common-theme" -import { CSFTheme } from "../../../../Themes/types" +import { CSFTheme } from "../../../../../Themes/types" import { Loading, Typography } from "@chainsafe/common-components" import BrowserPanel from "./BrowserPanel" -import { useThresholdKey } from "../../../../Contexts/ThresholdKeyContext" +import { useThresholdKey } from "../../../../../Contexts/ThresholdKeyContext" import { Trans } from "@lingui/macro" const useStyles = makeStyles(({ constants, breakpoints }: CSFTheme) => diff --git a/packages/files-ui/src/Components/Modules/Settings/Security/index.tsx b/packages/files-ui/src/Components/Modules/Settings/Security/index.tsx index d751598441..90991d1ec9 100644 --- a/packages/files-ui/src/Components/Modules/Settings/Security/index.tsx +++ b/packages/files-ui/src/Components/Modules/Settings/Security/index.tsx @@ -7,7 +7,7 @@ import { useThresholdKey } from "../../../../Contexts/ThresholdKeyContext" import clsx from "clsx" import PasswordForm from "../../../Elements/PasswordForm" import MnemonicForm from "../../../Elements/MnemonicForm" -import SavedBrowsers from "../SavedBrowsers" +import SavedBrowsers from "./SavedBrowsers" const useStyles = makeStyles(({ constants, breakpoints, palette, typography, zIndex }: CSFTheme) => createStyles({ diff --git a/packages/files-ui/src/Components/Modules/Settings/SubscriptionPlan/CurrentProduct.tsx b/packages/files-ui/src/Components/Modules/Settings/SubscriptionPlan/CurrentProduct.tsx new file mode 100644 index 0000000000..9e29a1773f --- /dev/null +++ b/packages/files-ui/src/Components/Modules/Settings/SubscriptionPlan/CurrentProduct.tsx @@ -0,0 +1,148 @@ +import React from "react" +import { + Grid, + Button, + Typography, + ProgressBar, + formatBytes, + Link +} from "@chainsafe/common-components" +import { makeStyles, ITheme, createStyles } from "@chainsafe/common-theme" +import clsx from "clsx" +import { useFiles } from "../../../../Contexts/FilesContext" +import { t, Trans } from "@lingui/macro" +import { ROUTE_LINKS } from "../../../FilesRoutes" + +const useStyles = makeStyles(({ constants, palette, breakpoints }: ITheme) => + createStyles({ + container: { + margin: constants.generalUnit * 4, + marginBottom: 160 + }, + storageBox: { + maxWidth: 400 + }, + margins: { + marginBottom: constants.generalUnit * 2 + }, + storagePlan: { + marginTop: constants.generalUnit * 4 + }, + earlyAdopter: { + fontWeight: "bold" + }, + essentialContainer: { + width: 300 + }, + subtitle: { + color: palette.additional["gray"][8], + [breakpoints.down("md")]: { + fontSize: 16, + lineHeight: "22px" + } + }, + spaceUsedBox: { + marginTop: constants.generalUnit * 3, + [breakpoints.down("md")]: { + marginBottom: constants.generalUnit, + width: "inherit" + } + }, + spaceUsedMargin: { + marginBottom: constants.generalUnit + }, + changePlanButton: { + marginTop: constants.generalUnit * 2, + width: "inherit" + }, + link: { + textDecoration: "none" + } + }) +) + +const CurrentProduct: React.FC = () => { + const classes = useStyles() + const { storageSummary } = useFiles() + + return ( + + + {storageSummary && +
+
+ + Subscription Plan + + + Storage Plan + + + {t`Early Adopter: Free up to ${formatBytes( + storageSummary.total_storage, 2 + )}`} + + + {t`Your first ${formatBytes( + storageSummary.total_storage, 2 + )} are free, and you’ll get a discount on our monthly plan once you need more than that`}. + +
+
+
+ {t`${formatBytes(storageSummary.used_storage, 2)} of ${formatBytes( + storageSummary.total_storage, 2 + )} used (${Math.ceil(storageSummary.used_storage / storageSummary.total_storage) * 100}%)`} + + +
+ + + +
+
+ } + + + + ) +} + +export default CurrentProduct diff --git a/packages/files-ui/src/Components/Modules/Settings/SubscriptionPlan/index.tsx b/packages/files-ui/src/Components/Modules/Settings/SubscriptionPlan/index.tsx new file mode 100644 index 0000000000..fac7cad3cf --- /dev/null +++ b/packages/files-ui/src/Components/Modules/Settings/SubscriptionPlan/index.tsx @@ -0,0 +1,11 @@ +import React from "react" +import CurrentProduct from "./CurrentProduct" + + +const PlanView: React.FC = () => { + return ( + + ) +} + +export default PlanView diff --git a/packages/files-ui/src/Components/Modules/Settings/index.tsx b/packages/files-ui/src/Components/Modules/Settings/index.tsx index cb6fbcd517..866db17364 100644 --- a/packages/files-ui/src/Components/Modules/Settings/index.tsx +++ b/packages/files-ui/src/Components/Modules/Settings/index.tsx @@ -9,12 +9,13 @@ import { Tabs, useHistory, ITabPaneProps, CaretRightIcon, + SubscriptionPlanIcon, LockIcon } from "@chainsafe/common-components" import { makeStyles, ITheme, createStyles, useThemeSwitcher } from "@chainsafe/common-theme" import { ROUTE_LINKS, SettingsPath, SETTINGS_BASE } from "../../FilesRoutes" import { t, Trans } from "@lingui/macro" -// import Plan from "./Plan" +import Plan from "./SubscriptionPlan/CurrentProduct" import { ProfileIcon } from "@chainsafe/common-components" import clsx from "clsx" import Security from "./Security" @@ -199,9 +200,14 @@ const Settings: React.FC = () => { > - {/* + } + iconRight={} + > - */} + } diff --git a/packages/files-ui/src/Components/Pages/PlansPage.tsx b/packages/files-ui/src/Components/Pages/PlansPage.tsx new file mode 100644 index 0000000000..f24f740b83 --- /dev/null +++ b/packages/files-ui/src/Components/Pages/PlansPage.tsx @@ -0,0 +1,8 @@ +import React from "react" +import Products from "../Modules/Settings/Products/Products" + +const PlansPage = () => { + return +} + +export default PlansPage diff --git a/packages/files-ui/src/locales/de/messages.po b/packages/files-ui/src/locales/de/messages.po index 3091d1ef42..2440d01e64 100644 --- a/packages/files-ui/src/locales/de/messages.po +++ b/packages/files-ui/src/locales/de/messages.po @@ -43,12 +43,21 @@ msgstr "Sind wir auf dem richtigen Weg? Sagen Sie es uns in weniger als 1 Minute msgid "Back" msgstr "" +msgid "Back to plan settings" +msgstr "" + msgid "Backup secret phrase" msgstr "Sicherungsgeheimsatz" msgid "Backup secret phrase does not match user account, please double-check and try again." msgstr "Der Sicherungsgeheimsatz stimmt nicht mit dem Benutzerkonto überein, bitte überprüfen Sie dies und versuchen Sie es erneut." +msgid "Billed Monthly" +msgstr "" + +msgid "Billed Yearly" +msgstr "" + msgid "Bin" msgstr "Papierkorb" @@ -58,6 +67,9 @@ msgstr "Browser:" msgid "Bucket id" msgstr "" +msgid "Buy more storage" +msgstr "" + msgid "By connecting your wallet, you agree to our <0>Terms of Service and <1>Privacy Policy" msgstr "" @@ -187,6 +199,9 @@ msgstr "" msgid "Drop to upload files" msgstr "Zum Hochladen von Dateien ablegen" +msgid "Early Adopter: Free up to {0}" +msgstr "" + msgid "Email is required" msgstr "E-Mail ist erforderlich" @@ -214,9 +229,6 @@ msgstr "" msgid "Error while uploading {0}" msgstr "" -msgid "Essentials - Free" -msgstr "Essentials - Kostenlos" - msgid "Failed to get signature" msgstr "Signatur kann nicht abgerufen werden" @@ -349,9 +361,6 @@ msgstr "" msgid "Looks like you’re signing in from a new browser. Please choose one of the following to continue:" msgstr "Sieht aus, als würden Sie sich über einen neuen Browser anmelden. Bitte wählen Sie eine der folgenden Möglichkeiten, um fortzufahren:" -msgid "Lorem ipsum aenean et rutrum magna. Morbi nec placerat erat. Nunc elementum sed libero sit amet convallis. Quisque non arcu vitae ex fringilla molestie." -msgstr "Lorem ipsum aenean et rutrum magna. Morbi nec placerat erat. Nunc elementum sed libero sit amet convallis. Quisque non arcu vitae ex fringilla molestie." - msgid "Manage Access" msgstr "" @@ -472,6 +481,9 @@ msgstr "Profileinstellungen" msgid "Profile updated" msgstr "Profil aktualisiert" +msgid "Purchase with card" +msgstr "" + msgid "Recover" msgstr "Wiederherstellen" @@ -628,6 +640,9 @@ msgstr "Speicherplan" msgid "Stored by miner" msgstr "" +msgid "Subscription Plan" +msgstr "" + msgid "Technical" msgstr "Technisch" @@ -685,12 +700,18 @@ msgstr "Erneut versuchen" msgid "Try another method" msgstr "Eine andere Methode versuchen" +msgid "Try for 7 days" +msgstr "" + msgid "Update" msgstr "Aktualisieren" msgid "Update Shared Folder" msgstr "" +msgid "Upgrade your plan" +msgstr "" + msgid "Upload" msgstr "Hochladen" @@ -775,6 +796,9 @@ msgstr "Sie haben noch keinen Benutzernamen festgelegt." msgid "You will need to sign a message in your wallet to complete sign in." msgstr "" +msgid "Your first {0} are free, and you’ll get a discount on our monthly plan once you need more than that" +msgstr "" + msgid "Your recovery key can be used to restore your account in place of your backup secret phrase." msgstr "Ihr Wiederherstellungsschlüssel kann zur Wiederherstellung Ihres Kontos anstelle Ihres Sicherungsgeheimsatz verwendet werden." @@ -805,5 +829,8 @@ msgstr "" msgid "{0, plural, one {You are about to delete {1} item.} other {You are about to delete {2} items.}}" msgstr "" +msgid "{0} of {1} used ({2}%)" +msgstr "" + msgid "{noOfFiles, plural, one {Uploading and encrypting {noOfFiles} file} other {Uploading and encrypting {noOfFiles} files}}" msgstr "{noOfFiles, plural, one {{noOfFiles} Datei wird hochgeladen und verschlüsselt} other {{noOfFiles} Datein werden hochgeladen und verschlüsselt}}" diff --git a/packages/files-ui/src/locales/en/messages.po b/packages/files-ui/src/locales/en/messages.po index cb6dc1791b..859c8a927a 100644 --- a/packages/files-ui/src/locales/en/messages.po +++ b/packages/files-ui/src/locales/en/messages.po @@ -43,12 +43,21 @@ msgstr "Are we on the right track? Let us know in less than 1 minute." msgid "Back" msgstr "Back" +msgid "Back to plan settings" +msgstr "Back to plan settings" + msgid "Backup secret phrase" msgstr "Backup secret phrase" msgid "Backup secret phrase does not match user account, please double-check and try again." msgstr "Backup secret phrase does not match user account, please double-check and try again." +msgid "Billed Monthly" +msgstr "Billed Monthly" + +msgid "Billed Yearly" +msgstr "Billed Yearly" + msgid "Bin" msgstr "Bin" @@ -58,6 +67,9 @@ msgstr "Browser:" msgid "Bucket id" msgstr "Bucket id" +msgid "Buy more storage" +msgstr "Buy more storage" + msgid "By connecting your wallet, you agree to our <0>Terms of Service and <1>Privacy Policy" msgstr "By connecting your wallet, you agree to our <0>Terms of Service and <1>Privacy Policy" @@ -187,6 +199,9 @@ msgstr "Downloading…" msgid "Drop to upload files" msgstr "Drop to upload files" +msgid "Early Adopter: Free up to {0}" +msgstr "Early Adopter: Free up to {0}" + msgid "Email is required" msgstr "Email is required" @@ -214,9 +229,6 @@ msgstr "Error while downloading {0}" msgid "Error while uploading {0}" msgstr "Error while uploading {0}" -msgid "Essentials - Free" -msgstr "Essentials - Free" - msgid "Failed to get signature" msgstr "Failed to get signature" @@ -352,9 +364,6 @@ msgstr "Loading your shared folders…" msgid "Looks like you’re signing in from a new browser. Please choose one of the following to continue:" msgstr "Looks like you’re signing in from a new browser. Please choose one of the following to continue:" -msgid "Lorem ipsum aenean et rutrum magna. Morbi nec placerat erat. Nunc elementum sed libero sit amet convallis. Quisque non arcu vitae ex fringilla molestie." -msgstr "Lorem ipsum aenean et rutrum magna. Morbi nec placerat erat. Nunc elementum sed libero sit amet convallis. Quisque non arcu vitae ex fringilla molestie." - msgid "Manage Access" msgstr "Manage Access" @@ -475,6 +484,9 @@ msgstr "Profile settings" msgid "Profile updated" msgstr "Profile updated" +msgid "Purchase with card" +msgstr "Purchase with card" + msgid "Recover" msgstr "Recover" @@ -631,6 +643,9 @@ msgstr "Storage Plan" msgid "Stored by miner" msgstr "Stored by miner" +msgid "Subscription Plan" +msgstr "Subscription Plan" + msgid "Technical" msgstr "Technical" @@ -688,12 +703,18 @@ msgstr "Try again" msgid "Try another method" msgstr "Try another method" +msgid "Try for 7 days" +msgstr "Try for 7 days" + msgid "Update" msgstr "Update" msgid "Update Shared Folder" msgstr "Update Shared Folder" +msgid "Upgrade your plan" +msgstr "Upgrade your plan" + msgid "Upload" msgstr "Upload" @@ -778,6 +799,9 @@ msgstr "You haven't set a username yet." msgid "You will need to sign a message in your wallet to complete sign in." msgstr "You will need to sign a message in your wallet to complete sign in." +msgid "Your first {0} are free, and you’ll get a discount on our monthly plan once you need more than that" +msgstr "Your first {0} are free, and you’ll get a discount on our monthly plan once you need more than that" + msgid "Your recovery key can be used to restore your account in place of your backup secret phrase." msgstr "Your recovery key can be used to restore your account in place of your backup secret phrase." @@ -808,5 +832,8 @@ msgstr "unknown" msgid "{0, plural, one {You are about to delete {1} item.} other {You are about to delete {2} items.}}" msgstr "{0, plural, one {You are about to delete {1} item.} other {You are about to delete {2} items.}}" +msgid "{0} of {1} used ({2}%)" +msgstr "{0} of {1} used ({2}%)" + msgid "{noOfFiles, plural, one {Uploading and encrypting {noOfFiles} file} other {Uploading and encrypting {noOfFiles} files}}" msgstr "{noOfFiles, plural, one {Uploading and encrypting {noOfFiles} file} other {Uploading and encrypting {noOfFiles} files}}" diff --git a/packages/files-ui/src/locales/es/messages.po b/packages/files-ui/src/locales/es/messages.po index b8fa8e79a7..e45a3471ff 100644 --- a/packages/files-ui/src/locales/es/messages.po +++ b/packages/files-ui/src/locales/es/messages.po @@ -44,12 +44,21 @@ msgstr "" msgid "Back" msgstr "" +msgid "Back to plan settings" +msgstr "" + msgid "Backup secret phrase" msgstr "" msgid "Backup secret phrase does not match user account, please double-check and try again." msgstr "" +msgid "Billed Monthly" +msgstr "" + +msgid "Billed Yearly" +msgstr "" + msgid "Bin" msgstr "Papelera" @@ -59,6 +68,9 @@ msgstr "Navegador:" msgid "Bucket id" msgstr "" +msgid "Buy more storage" +msgstr "" + msgid "By connecting your wallet, you agree to our <0>Terms of Service and <1>Privacy Policy" msgstr "Al conectar su billetera, acepta nuestras <0> Condiciones de servicio y <1> Política de privacidad " @@ -188,6 +200,9 @@ msgstr "" msgid "Drop to upload files" msgstr "Suelta para subir archivos" +msgid "Early Adopter: Free up to {0}" +msgstr "" + msgid "Email is required" msgstr "" @@ -215,9 +230,6 @@ msgstr "" msgid "Error while uploading {0}" msgstr "" -msgid "Essentials - Free" -msgstr "Esenciales - Gratis" - msgid "Failed to get signature" msgstr "No se pudo obtener la firma" @@ -353,9 +365,6 @@ msgstr "" msgid "Looks like you’re signing in from a new browser. Please choose one of the following to continue:" msgstr "Parece que está iniciando sesión desde un nuevo navegador. Elija una de las siguientes opciones para continuar:" -msgid "Lorem ipsum aenean et rutrum magna. Morbi nec placerat erat. Nunc elementum sed libero sit amet convallis. Quisque non arcu vitae ex fringilla molestie." -msgstr "Lorem ipsum Aenean, y un gran maquillaje. Usamos más y colocamos en ratas. Ahora elemento libre, pero mucho del valle. , Quien no se doblegue, de la vida de una fringilla molestie." - msgid "Manage Access" msgstr "" @@ -476,6 +485,9 @@ msgstr "" msgid "Profile updated" msgstr "Perfil actualizado" +msgid "Purchase with card" +msgstr "" + msgid "Recover" msgstr "Recuperar" @@ -632,6 +644,9 @@ msgstr "Plan de almacenamiento" msgid "Stored by miner" msgstr "Almacenado por el minero" +msgid "Subscription Plan" +msgstr "" + msgid "Technical" msgstr "Técnico" @@ -689,12 +704,18 @@ msgstr "Intentar otra vez" msgid "Try another method" msgstr "Prueba con otro método" +msgid "Try for 7 days" +msgstr "" + msgid "Update" msgstr "Actualizar" msgid "Update Shared Folder" msgstr "" +msgid "Upgrade your plan" +msgstr "" + msgid "Upload" msgstr "Subir" @@ -779,6 +800,9 @@ msgstr "" msgid "You will need to sign a message in your wallet to complete sign in." msgstr "Deberá firmar un mensaje en su billetera para completar el inicio de sesión." +msgid "Your first {0} are free, and you’ll get a discount on our monthly plan once you need more than that" +msgstr "" + msgid "Your recovery key can be used to restore your account in place of your backup secret phrase." msgstr "" @@ -809,5 +833,8 @@ msgstr "" msgid "{0, plural, one {You are about to delete {1} item.} other {You are about to delete {2} items.}}" msgstr "" +msgid "{0} of {1} used ({2}%)" +msgstr "" + msgid "{noOfFiles, plural, one {Uploading and encrypting {noOfFiles} file} other {Uploading and encrypting {noOfFiles} files}}" msgstr "{noOfFiles, plural, one {Carga y encriptación del archivo {noOfFiles}} other {Carga y encriptación de archivos {noOfFiles}}}" diff --git a/packages/files-ui/src/locales/fr/messages.mo b/packages/files-ui/src/locales/fr/messages.mo deleted file mode 100644 index 3304428284b02b26aafe5df2105c7052c4e1b597..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 17948 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 of Service and <1>Privacy Policy" msgstr "En connectant votre portefeuille, vous acceptez nos <0>conditions de service et notre <1>politique de confidentialité" @@ -189,6 +201,9 @@ msgstr "Téléchargement…" msgid "Drop to upload files" msgstr "Faire glisser pour téléverser un fichier" +msgid "Early Adopter: Free up to {0}" +msgstr "" + msgid "Email is required" msgstr "Un courriel est requis" @@ -216,9 +231,6 @@ msgstr "Erreur lors du téléchargement de {0}" msgid "Error while uploading {0}" msgstr "Erreur lors du téléversement de {0}" -msgid "Essentials - Free" -msgstr "Essentials - Gratuit" - msgid "Failed to get signature" msgstr "Échec de l’obtention de la signature" @@ -354,9 +366,6 @@ msgstr "Chargement de vos dossiers partagés…" msgid "Looks like you’re signing in from a new browser. Please choose one of the following to continue:" msgstr "Il semble que vous vous connectiez à partir d’un nouveau navigateur. Veuillez choisir une des options suivantes pour continuer :" -msgid "Lorem ipsum aenean et rutrum magna. Morbi nec placerat erat. Nunc elementum sed libero sit amet convallis. Quisque non arcu vitae ex fringilla molestie." -msgstr "Lorem ipsum aenean et rutrum magna. Morbi nec placerat erat. Nunc elementum sed libero sit amet convallis. Quisque non arcu vitae ex fringilla molestie." - msgid "Manage Access" msgstr "Gérer l’accès" @@ -477,6 +486,9 @@ msgstr "Paramètres du profil" msgid "Profile updated" msgstr "Profile mis à jour" +msgid "Purchase with card" +msgstr "" + msgid "Recover" msgstr "Récupérer" @@ -633,6 +645,9 @@ msgstr "Plan de stockage" msgid "Stored by miner" msgstr "Sauvegardé par le mineur" +msgid "Subscription Plan" +msgstr "" + msgid "Technical" msgstr "Technique" @@ -690,12 +705,18 @@ msgstr "Essayer de nouveau" msgid "Try another method" msgstr "Essayer une autre méthode" +msgid "Try for 7 days" +msgstr "" + msgid "Update" msgstr "Mettre à jour" msgid "Update Shared Folder" msgstr "Mettre à jour le dossier partagé" +msgid "Upgrade your plan" +msgstr "" + msgid "Upload" msgstr "Téléverser" @@ -780,6 +801,9 @@ msgstr "Vous n’avez pas encore défini de nom d’utilisateur." msgid "You will need to sign a message in your wallet to complete sign in." msgstr "Vous devrez signer un message avec votre wallet pour terminer la procédure connexion." +msgid "Your first {0} are free, and you’ll get a discount on our monthly plan once you need more than that" +msgstr "" + msgid "Your recovery key can be used to restore your account in place of your backup secret phrase." msgstr "Votre clé de récupération peut être utilisée pour restaurer votre compte à la place de votre phrase de sauvegarde secrète." @@ -810,5 +834,8 @@ msgstr "inconnu" msgid "{0, plural, one {You are about to delete {1} item.} other {You are about to delete {2} items.}}" msgstr "{0, plural, one {Vous êtes sur le point de supprimer {1} élément.} other {Vous êtes sur le point de supprimer {2} éléments.}}" +msgid "{0} of {1} used ({2}%)" +msgstr "" + msgid "{noOfFiles, plural, one {Uploading and encrypting {noOfFiles} file} other {Uploading and encrypting {noOfFiles} files}}" -msgstr "{noOfFiles, plural, one {Téléversement et chiffrement de {noOfFiles} fichier} other {Téléversement et chiffrement de {noOfFiles} fichiers}}" +msgstr "{noOfFiles, plural, one {Upload et chiffrage de {noOfFiles} fichier} other {Upload et chiffrage de {noOfFiles} fichiers}}" diff --git a/packages/files-ui/src/locales/no/messages.po b/packages/files-ui/src/locales/no/messages.po index 249161d948..a2cb15f4e2 100644 --- a/packages/files-ui/src/locales/no/messages.po +++ b/packages/files-ui/src/locales/no/messages.po @@ -43,12 +43,21 @@ msgstr "" msgid "Back" msgstr "" +msgid "Back to plan settings" +msgstr "" + msgid "Backup secret phrase" msgstr "" msgid "Backup secret phrase does not match user account, please double-check and try again." msgstr "" +msgid "Billed Monthly" +msgstr "" + +msgid "Billed Yearly" +msgstr "" + msgid "Bin" msgstr "" @@ -58,6 +67,9 @@ msgstr "" msgid "Bucket id" msgstr "" +msgid "Buy more storage" +msgstr "" + msgid "By connecting your wallet, you agree to our <0>Terms of Service and <1>Privacy Policy" msgstr "" @@ -187,6 +199,9 @@ msgstr "" msgid "Drop to upload files" msgstr "Dra for å laste opp filer" +msgid "Early Adopter: Free up to {0}" +msgstr "" + msgid "Email is required" msgstr "E-post kreves" @@ -214,9 +229,6 @@ msgstr "" msgid "Error while uploading {0}" msgstr "" -msgid "Essentials - Free" -msgstr "" - msgid "Failed to get signature" msgstr "" @@ -349,9 +361,6 @@ msgstr "" msgid "Looks like you’re signing in from a new browser. Please choose one of the following to continue:" msgstr "" -msgid "Lorem ipsum aenean et rutrum magna. Morbi nec placerat erat. Nunc elementum sed libero sit amet convallis. Quisque non arcu vitae ex fringilla molestie." -msgstr "" - msgid "Manage Access" msgstr "" @@ -472,6 +481,9 @@ msgstr "Profilinnstillinger" msgid "Profile updated" msgstr "Profil oppdatert" +msgid "Purchase with card" +msgstr "" + msgid "Recover" msgstr "Gjenopprett" @@ -628,6 +640,9 @@ msgstr "" msgid "Stored by miner" msgstr "" +msgid "Subscription Plan" +msgstr "" + msgid "Technical" msgstr "Teknisk" @@ -685,12 +700,18 @@ msgstr "Prøv igjen" msgid "Try another method" msgstr "Prøv annen metode" +msgid "Try for 7 days" +msgstr "" + msgid "Update" msgstr "Oppdater" msgid "Update Shared Folder" msgstr "" +msgid "Upgrade your plan" +msgstr "" + msgid "Upload" msgstr "Last opp" @@ -775,6 +796,9 @@ msgstr "Du har ikke satt noe brukernavn enda." msgid "You will need to sign a message in your wallet to complete sign in." msgstr "" +msgid "Your first {0} are free, and you’ll get a discount on our monthly plan once you need more than that" +msgstr "" + msgid "Your recovery key can be used to restore your account in place of your backup secret phrase." msgstr "" @@ -805,5 +829,8 @@ msgstr "" msgid "{0, plural, one {You are about to delete {1} item.} other {You are about to delete {2} items.}}" msgstr "" +msgid "{0} of {1} used ({2}%)" +msgstr "" + msgid "{noOfFiles, plural, one {Uploading and encrypting {noOfFiles} file} other {Uploading and encrypting {noOfFiles} files}}" msgstr "" diff --git a/packages/gaming-ui/src/Components/GamingRoutes.tsx b/packages/gaming-ui/src/Components/GamingRoutes.tsx index 867d07c7cd..e05e9b16ba 100644 --- a/packages/gaming-ui/src/Components/GamingRoutes.tsx +++ b/packages/gaming-ui/src/Components/GamingRoutes.tsx @@ -2,18 +2,23 @@ import React from "react" import { Switch, ConditionalRoute } from "@chainsafe/common-components" import LoginPage from "./Pages/LoginPage" import { useGamingApi } from "../Contexts/GamingApiContext" -import SettingsPage from "./Pages/SettingsPage" +import BillingPage from "./Pages/BillingPage" +import Products from "./Modules/Products" +import ApiKeys from "./Modules/ApiKeys" -export const SETTINGS_PATHS = ["apiKeys"] as const +export const SETTINGS_PATHS = ["apiKeys", "billing"] as const export type SettingsPath = typeof SETTINGS_PATHS[number] export const ROUTE_LINKS = { Landing: "/", - SettingsRoot: "/settings", - Settings: (path: SettingsPath) => `/settings/${path}`, + // SettingsRoot: "/settings", + // Settings: (path: SettingsPath) => `/settings/${path}`, + APIKeys: "/keys", PrivacyPolicy: "https://files.chainsafe.io/privacy-policy", Terms: "https://files.chainsafe.io/terms-of-service", - ChainSafe: "https://chainsafe.io/" + ChainSafe: "https://chainsafe.io/", + Billing: "/billing", + Products: "/products" } @@ -24,16 +29,28 @@ const GamingRoutes = () => { return ( + + diff --git a/packages/gaming-ui/src/Components/Layouts/AppHeader.tsx b/packages/gaming-ui/src/Components/Layouts/AppHeader.tsx index b9fe3d31fc..8609a3a0d8 100644 --- a/packages/gaming-ui/src/Components/Layouts/AppHeader.tsx +++ b/packages/gaming-ui/src/Components/Layouts/AppHeader.tsx @@ -205,7 +205,7 @@ const AppHeader = ({ navOpen, setNavOpen }: IAppHeader) => { /> = ({ navOpen, setNavOpen }: IAppNav) => {
@@ -241,17 +242,31 @@ const AppNav: React.FC = ({ navOpen, setNavOpen }: IAppNav) => {
diff --git a/packages/gaming-ui/src/Components/Modules/Login/PasswordlessEmail.tsx b/packages/gaming-ui/src/Components/Modules/Login/PasswordlessEmail.tsx new file mode 100644 index 0000000000..1324dd781f --- /dev/null +++ b/packages/gaming-ui/src/Components/Modules/Login/PasswordlessEmail.tsx @@ -0,0 +1,296 @@ +import React, { useState, useCallback, useMemo } from "react" +import { createStyles, makeStyles } from "@chainsafe/common-theme" +import { CSGTheme } from "../../../Themes/types" +import { Button, Emoji, FormikTextInput, Typography } from "@chainsafe/common-components" +import { Trans, t } from "@lingui/macro" +import clsx from "clsx" +import { Form, Formik } from "formik" +import * as yup from "yup" +import { useGamingApi } from "../../../Contexts/GamingApiContext" + +const useStyles = makeStyles(({ palette, breakpoints, constants }: CSGTheme) => + createStyles({ + root: { + width: "100vw", + [breakpoints.up("md")]: { + padding: `${constants.generalUnit * 4}px ${constants.generalUnit * 15}px`, + maxWidth: 580 + }, + [breakpoints.down("md")]: { + padding: `${constants.generalUnit * 2}px ${constants.generalUnit * 3}px` + } + }, + headerText: { + textAlign: "center", + [breakpoints.up("md")]: { + paddingBottom: constants.generalUnit * 4 + }, + [breakpoints.down("md")]: { + paddingBottom: constants.generalUnit * 3 + } + }, + input: { + margin: 0, + width: "100%", + marginBottom: constants.generalUnit + }, + inputLabel: { + fontSize: "16px", + lineHeight: "24px", + marginBottom: constants.generalUnit + }, + button: { + [breakpoints.up("md")]: { + marginTop: constants.generalUnit + }, + [breakpoints.down("md")]: { + marginTop: constants.generalUnit + } + }, + buttonLink: { + color: palette.additional["gray"][10], + outline: "none", + textDecoration: "underline", + cursor: "pointer", + textAlign: "center", + marginTop: constants.generalUnit * 2, + "&.disabled": { + color: palette.additional["gray"][7] + }, + "&.spaceLeft": { + marginLeft: constants.generalUnit * 0.5 + } + }, + title: { + textAlign: "center" + }, + subtitle: { + textAlign: "center", + paddingTop: constants.generalUnit * 4, + paddingBottom: constants.generalUnit * 4 + }, + resendText: { + textAlign: "center", + marginTop: constants.generalUnit * 4 + }, + errorText: { + textAlign: "center", + color: palette.error.main + } + }) +) + +interface IPasswordlessEmail { + resetLogin: () => void +} + +const PasswordlessEmail = ({ resetLogin }: IPasswordlessEmail) => { + const classes = useStyles() + const [isSubmitEmailLoading, setIsSubmitEmailLoading] = useState(false) + const [isSubmitResendEmailLoading, setIsSubmitResendEmailLoading] = useState(false) + const [isSubmitNonceLoading, setIsSubmitNonceLoading] = useState(false) + const [page, setPage] = useState<"confirmEmail" | "confirmVerificationCode">("confirmEmail") + const [email, setEmail] = useState() + const { gamingApiClient, login } = useGamingApi() + const [hasEmailResent, setHasEmailResent] = useState(false) + const [error, setError] = useState() + + const emailValidation = useMemo(() => yup.object().shape({ + email: yup + .string() + .email(t`Please enter a valid email`) + .required(t`Email is required`) + }) + , []) + + const nonceValidation = useMemo(() => yup.object().shape({ + nonce: yup + .string() + .required(t`Verification code is required`) + }) + , []) + + const onSubmitEmail = useCallback((values) => { + setIsSubmitEmailLoading(true) + setError(undefined) + gamingApiClient.getIdentityEmailToken({ email: values.email }) + .then(() => { + setEmail(values.email) + setPage("confirmVerificationCode") + }).catch ((e) => { + setError(t`Something went wrong! Please try again.`) + console.error(e) + }).finally (() => setIsSubmitEmailLoading(false)) + }, [gamingApiClient]) + + const onSubmitNonce = useCallback((values) => { + if (!email) return + setIsSubmitNonceLoading(true) + setError(undefined) + gamingApiClient.postIdentityEmailToken({ + email: email, + nonce: values.nonce + }).then(async (data) => { + await login("email", { token: data || "", email }) + }).catch ((e) => { + if (e && e[0] && e[0].type === "nonce") { + setError(t`Verification code not correct!`) + } else { + setError(t`Something went wrong!`) + } + console.error(e) + }).finally(() => setIsSubmitNonceLoading(false)) + }, [gamingApiClient, email, login]) + + const onResendEmail = useCallback(() => { + if (!email) return + setIsSubmitResendEmailLoading(true) + gamingApiClient.getIdentityEmailToken({ email }) + .then(() => setHasEmailResent(true)) + .catch(console.error) + .finally(() => setIsSubmitResendEmailLoading(false)) + }, [gamingApiClient, email]) + + return ( +
+ + + Sign in + + + {page === "confirmEmail" + ? +
+ + {error && ( + + {error} + + )} + + +
+ : <> + +
+ + Verification code sent! + + + We’ve sent an email to {email}. It contains a verification code that’ll sign you in super quickly! + + + {error && ( + + {error} + + )} + + +
+ + {!hasEmailResent + ? + + + Didn't receive the email ? + + + + + Send another email + + + + : + + + Check your inbox! We've sent another email. + + + + } + + } +
+ Go back +
+
+ ) +} + +export default PasswordlessEmail diff --git a/packages/gaming-ui/src/Components/Modules/Login/index.tsx b/packages/gaming-ui/src/Components/Modules/Login/index.tsx new file mode 100644 index 0000000000..c614f1780c --- /dev/null +++ b/packages/gaming-ui/src/Components/Modules/Login/index.tsx @@ -0,0 +1,436 @@ +import React, { useState } from "react" +import { Button, GithubLogoIcon, GoogleLogoIcon, Loading, MailIcon, Typography } from "@chainsafe/common-components" +import { createStyles, makeStyles, useThemeSwitcher } from "@chainsafe/common-theme" +import { CSGTheme } from "../../../Themes/types" +import { t, Trans } from "@lingui/macro" +import { useGamingApi } from "../../../Contexts/GamingApiContext" +import { useWeb3 } from "@chainsafe/web3-context" +import { ROUTE_LINKS } from "../../GamingRoutes" +import clsx from "clsx" +import { IdentityProvider } from "@chainsafe/files-api-client" +import PasswordlessEmail from "./PasswordlessEmail" + +const useStyles = makeStyles( + ({ constants, palette, breakpoints, typography }: CSGTheme) => + createStyles({ + root: { + backgroundColor: constants.loginModule.background, + border: `1px solid ${constants.landing.border}`, + boxShadow: constants.landing.boxShadow, + alignItems: "center", + borderRadius: 6, + [breakpoints.up("md")]:{ + minHeight: "64vh", + justifyContent: "space-between", + width: 440 + }, + [breakpoints.down("md")]: { + padding: `${constants.generalUnit * 4}px ${constants.generalUnit * 2}px`, + justifyContent: "center", + width: `calc(100vw - ${constants.generalUnit * 2}px)` + } + }, + buttonSection: { + [breakpoints.up("md")]: { + position: "absolute", + top: "50%", + left: "50%", + transform: "translate(-50%, -50%)" + }, + [breakpoints.down("md")]: { + display: "flex", + flexDirection: "column", + justifyContent: "space-evenly" + } + }, + connectingWallet: { + textAlign: "center", + alignItems: "center", + display: "flex", + flexDirection: "column", + "& > *": { + fontWeight: 400 + }, + [breakpoints.up("md")]: { + padding: `${constants.generalUnit * 30}px ${constants.generalUnit * 8}px`, + "& > *": { + paddingBottom: `${constants.generalUnit * 5}px` + } + }, + [breakpoints.down("md")]: { + justifyContent: "space-evenly" + } + }, + button: { + width: 240, + fontWeight: typography.fontWeight.medium, + marginBottom: constants.generalUnit * 2, + "& .icon" : { + fontSize: 25 + }, + "&:last-child": { + marginBottom: 0 + } + }, + error: { + color: palette.error.main, + paddingBottom: constants.generalUnit * 2, + maxWidth: 240 + }, + headerText: { + [breakpoints.up("md")]: { + paddingTop: constants.generalUnit * 4, + paddingBottom: constants.generalUnit * 8 + }, + [breakpoints.down("md")]: { + paddingTop: constants.generalUnit * 3, + paddingBottom: constants.generalUnit * 3, + textAlign: "center" + } + }, + footer: { + backgroundColor: constants.landing.footerBg, + color: constants.landing.footerText, + padding: `${constants.generalUnit * 2.5}px ${constants.generalUnit * 1.5}px`, + width: "100%", + "& > *": { + marginRight: constants.generalUnit * 3.5 + }, + [breakpoints.down("md")]: { + display: "none" + } + }, + connectWalletFooter: { + backgroundColor: constants.landing.background, + color: constants.landing.footerText, + padding: `${constants.generalUnit * 4.375}px ${constants.generalUnit * 7}px`, + width: "100%", + textAlign: "center", + "& > *": { + fontWeight: 400 + }, + [breakpoints.down("md")]: { + display: "none" + } + }, + loader: { + marginTop: constants.generalUnit, + padding: 0 + }, + buttonLink: { + color: palette.additional["gray"][10], + outline: "none", + textDecoration: "underline", + cursor: "pointer", + textAlign: "center" + }, + web3Button: { + minHeight: 41 + } + }) +) + +interface IInitialScreen { + className?: string +} + +const LoginModule = ({ className }: IInitialScreen) => { + const { selectWallet, resetAndSelectWallet, login, resetStatus, status } = useGamingApi() + const { desktop } = useThemeSwitcher() + const { wallet } = useWeb3() + const classes = useStyles() + const [loginMode, setLoginMode] = useState() + const [error, setError] = useState() + const maintenanceMode = process.env.REACT_APP_MAINTENANCE_MODE === "true" + const [isConnecting, setIsConnecting] = useState(false) + + const handleSelectWalletAndConnect = async () => { + setError(undefined) + try { + await selectWallet() + } catch (error) { + setError(t`There was an error connecting your wallet`) + } + } + + const handleResetAndSelectWallet = async () => { + setError(undefined) + try { + await resetAndSelectWallet() + } catch (error) { + setError(t`There was an error connecting your wallet`) + } + } + + const resetLogin = async () => { + setError(undefined) + setLoginMode(undefined) + resetStatus() + } + + const handleLogin = async (loginType: IdentityProvider) => { + setError("") + setIsConnecting(true) + setLoginMode(loginType) + try { + await login(loginType) + } catch (error) { + let errorMessage = t`There was an error authenticating` + console.log(error) + if (Array.isArray(error) && error[0]) { + if ( + error[0].type === "signature" && + error[0].message === "Invalid signature" + ) { + errorMessage = t`Failed to validate signature. + If you are using a contract wallet, please make + sure you have activated your wallet.` + } + } + // WalletConnect be sassy + if (error?.message === "Just nope" || error?.code === 4001) { + errorMessage = t`Failed to get signature` + } + if (error?.message === "user closed popup") { + errorMessage = t`The authentication popup was closed` + } + setError(errorMessage) + } + setIsConnecting(false) + } + + const ConnectWallet = () => { + if (!wallet) { + console.error("No wallet found") + return null + } + + return ( +
+
+ + +
+ + Go back + +
+
+
+
+ )} + + const WalletConnection = () => { + return ( +
+ Connect Wallet to Gaming + {status === "awaiting confirmation" && + + You will need to sign a message in your wallet to complete sign in. + } + {status === "logging in" && <> + + Hold on, we are logging you in… + + + } +
+ ) + } + + const WalletSelection = () => { + return ( + <> +
+ + +
+