From 2aab0b058c7b685f006d69c86ef3baa739766ca9 Mon Sep 17 00:00:00 2001 From: ryry79261 Date: Thu, 23 Sep 2021 15:24:50 +0200 Subject: [PATCH 01/10] Dashboard cards done --- packages/common-components/src/index.ts | 1 + .../src/Components/Elements/ApiKeyCard.tsx | 90 ++++++ .../gaming-ui/src/Components/GamingRoutes.tsx | 4 +- .../src/Components/Layouts/AppNav.tsx | 9 +- .../Components/Modules/DashboardModule.tsx | 259 ++++++++++++++++++ .../src/Components/Pages/DashboardPage.tsx | 21 +- 6 files changed, 358 insertions(+), 26 deletions(-) create mode 100644 packages/gaming-ui/src/Components/Elements/ApiKeyCard.tsx create mode 100644 packages/gaming-ui/src/Components/Modules/DashboardModule.tsx diff --git a/packages/common-components/src/index.ts b/packages/common-components/src/index.ts index 8684f17bf5..a6d8a17044 100644 --- a/packages/common-components/src/index.ts +++ b/packages/common-components/src/index.ts @@ -20,6 +20,7 @@ export * from "./Icons" export * from "./Modal" export * from "./NumberInput" export * from "./MenuDropdown" +export * from "./Paper" export * from "./ProgressBar" export * from "./RadioInput" export * from "./Router" diff --git a/packages/gaming-ui/src/Components/Elements/ApiKeyCard.tsx b/packages/gaming-ui/src/Components/Elements/ApiKeyCard.tsx new file mode 100644 index 0000000000..f3ca6c27dd --- /dev/null +++ b/packages/gaming-ui/src/Components/Elements/ApiKeyCard.tsx @@ -0,0 +1,90 @@ +import React from "react" +import { AccessKey } from "@chainsafe/files-api-client" +import { makeStyles, createStyles } from "@chainsafe/common-theme" +import { CSGTheme } from "../../Themes/types" +import { Button, Typography, Paper } from "@chainsafe/common-components" +import { Trans } from "@lingui/macro" +import dayjs from "dayjs" + + +const useStyles = makeStyles(({ constants }: CSGTheme) => + createStyles({ + root: { + position: "relative", + margin: constants.generalUnit, + borderRadius: constants.generalUnit / 2, + maxWidth: 250 + }, + button: { + marginTop: constants.generalUnit * 2 + } + }) +) + +interface IApiKeyCard { + apiKey: AccessKey + deleteKey: () => void +} + +const ApiKeyCard = ({ apiKey, deleteKey }: IApiKeyCard) => { + const classes = useStyles() + + return ( + + + + Id: + + + +  { apiKey.id } + + + + Status: + + + +  { apiKey.status } + + {/* + + Secret: + + */} + {/* +  { apiKey.secret } + */} + + + Created on: + + + +  { dayjs(apiKey.created_at).format("DD MMM YYYY h:mm a") } + + + + ) +} + +export default ApiKeyCard \ No newline at end of file diff --git a/packages/gaming-ui/src/Components/GamingRoutes.tsx b/packages/gaming-ui/src/Components/GamingRoutes.tsx index 45b6928323..3936871e6b 100644 --- a/packages/gaming-ui/src/Components/GamingRoutes.tsx +++ b/packages/gaming-ui/src/Components/GamingRoutes.tsx @@ -31,7 +31,9 @@ const GamingRoutes = () => { /> diff --git a/packages/gaming-ui/src/Components/Layouts/AppNav.tsx b/packages/gaming-ui/src/Components/Layouts/AppNav.tsx index b312cb4e21..fd43ee34d5 100644 --- a/packages/gaming-ui/src/Components/Layouts/AppNav.tsx +++ b/packages/gaming-ui/src/Components/Layouts/AppNav.tsx @@ -9,10 +9,7 @@ import { Link, Typography, PowerDownSvg, - // ProgressBar, - // formatBytes, - ChainsafeLogo, - SettingSvg + ChainsafeLogo } from "@chainsafe/common-components" import { ROUTE_LINKS } from "../GamingRoutes" import { Trans } from "@lingui/macro" @@ -240,7 +237,7 @@ const AppNav: React.FC = ({ navOpen, setNavOpen }: IAppNav) => { )}
diff --git a/packages/gaming-ui/src/Components/Modules/DashboardModule.tsx b/packages/gaming-ui/src/Components/Modules/DashboardModule.tsx new file mode 100644 index 0000000000..be67f54fc2 --- /dev/null +++ b/packages/gaming-ui/src/Components/Modules/DashboardModule.tsx @@ -0,0 +1,259 @@ +import { Button, CopyIcon, Modal, PlusIcon, Typography } from "@chainsafe/common-components" +import { createStyles, debounce, makeStyles } from "@chainsafe/common-theme" +import { AccessKey } from "@chainsafe/files-api-client" +import { Trans } from "@lingui/macro" +import React, { useCallback, useEffect, useState } from "react" +import { useGamingApi } from "../../Contexts/GamingApiContext" +import { CSGTheme } from "../../Themes/types" +import ApiKeyCard from "../Elements/ApiKeyCard" + +const useStyles = makeStyles(({ breakpoints, constants, palette, zIndex }: CSGTheme) => + createStyles({ + root: { + position: "relative", + margin: constants.generalUnit + }, + header: { + display: "flex", + flexDirection: "row", + justifyContent: "space-between", + alignItems: "center", + [breakpoints.down("md")]: { + marginTop: constants.generalUnit + } + }, + controls: { + display: "flex", + flexDirection: "row", + justifyContent: "space-between", + alignItems: "center", + "& > button": { + marginLeft: constants.generalUnit + } + }, + dataArea: { + marginTop: constants.generalUnit * 2, + display: "flex", + flexDirection: "row", + justifyContent: "space-between", + flexWrap: "wrap", + "& > *": { + margin: constants.generalUnit, + width:"100%", + [breakpoints.up("xs")]: { + maxWidth: `calc(100% - ${constants.generalUnit * 2}px)` + }, + [breakpoints.up("sm")]: { + maxWidth: `calc(50% - ${constants.generalUnit * 2}px)` + }, + [breakpoints.up("md")]: { + maxWidth: `calc(33% - ${constants.generalUnit * 2}px)` + }, + [breakpoints.up("lg")]: { + maxWidth: `calc(25% - ${constants.generalUnit * 2}px)` + }, + [breakpoints.up("xl")]: { + maxWidth: `calc(20% - ${constants.generalUnit * 2}px)` + } + } + }, + modalRoot: { + zIndex: zIndex?.blocker, + [breakpoints.down("md")]: {} + }, + modalInner: { + [breakpoints.down("md")]: { + bottom: + Number(constants?.mobileButtonHeight) + constants.generalUnit, + borderTopLeftRadius: `${constants.generalUnit * 1.5}px`, + borderTopRightRadius: `${constants.generalUnit * 1.5}px`, + maxWidth: `${breakpoints.width("md")}px !important` + } + }, + modalHeading: { + textAlign: "center", + marginBottom: constants.generalUnit * 4 + }, + modalContent: { + display: "flex", + flexDirection: "column", + padding: constants.generalUnit * 4 + }, + secretContainer: { + display: "flex", + justifyContent: "space-between", + marginBottom: constants.generalUnit * 0.5 + }, + copyBox: { + display: "flex", + justifyContent: "space-between", + alignItems: "center", + cursor: "pointer", + color: palette.text.secondary + }, + copyIcon: { + fontSize: "14px", + fill: constants.profile.icon, + [breakpoints.down("md")]: { + fontSize: "18px", + fill: palette.additional["gray"][9] + } + }, + secret: { + maxWidth: "95%", + overflowWrap: "anywhere" + }, + field: { + marginBottom: constants.generalUnit * 4 + } + }) +) + +const DashboardModule = () => { + const classes = useStyles() + const { gamingApiClient } = useGamingApi() + const [keys, setKeys] = useState([]) + const [newKey, setNewKey] = useState() + const [isNewKeyModalOpen, setIsNewKeyModalOpen] = useState(false) + const [copiedSecret, setCopiedSecret] = useState(false) + const debouncedCopiedSecret = + debounce(() => setCopiedSecret(false), 3000) + + const copySecret = async () => { + if (newKey?.secret) { + try { + await navigator.clipboard.writeText(newKey.secret) + setCopiedSecret(true) + debouncedCopiedSecret() + } catch (err) { + console.error(err) + } + } + } + + const fetchAccessKeys = useCallback(() => { + gamingApiClient.listAccessKeys() + .then(keys => setKeys(keys.filter(key => key.type === "gaming"))) + .catch(console.error) + }, [gamingApiClient]) + + const createStorageAccessKey = useCallback(() => { + gamingApiClient.createAccessKey({ type: "gaming" }) + .then(setNewKey) + .then(fetchAccessKeys) + .then(() => setIsNewKeyModalOpen(true)) + .catch(console.error) + }, [fetchAccessKeys, gamingApiClient]) + + const deleteAccessKey = useCallback((id: string) => { + gamingApiClient.deleteAccessKey(id) + .then(fetchAccessKeys) + .catch(console.error) + }, [gamingApiClient, fetchAccessKeys]) + + useEffect(() => { + fetchAccessKeys() + }, [fetchAccessKeys]) + + return ( + <> +
+
+ + + Dashboard + + +
+ +
+
+
+ { + keys.map((key: AccessKey, index: number) => ( + deleteAccessKey(key.id)} + apiKey={key} />)) + } +
+
+ +
+ + New Key + + + Key ID + + {newKey?.id} + + Secret + +
+
+ + Make sure to save the secret, as it can only be displayed once. + + {copiedSecret && ( + + Copied! + + )} +
+
+ + {newKey?.secret} + + +
+
+ +
+ + + ) +} + +export default DashboardModule \ No newline at end of file diff --git a/packages/gaming-ui/src/Components/Pages/DashboardPage.tsx b/packages/gaming-ui/src/Components/Pages/DashboardPage.tsx index 8a3df055c5..2cd132244a 100644 --- a/packages/gaming-ui/src/Components/Pages/DashboardPage.tsx +++ b/packages/gaming-ui/src/Components/Pages/DashboardPage.tsx @@ -1,27 +1,10 @@ import React from "react" -import { makeStyles, createStyles } from "@chainsafe/common-theme" -import { Typography } from "@chainsafe/common-components" - -const useStyles = makeStyles(() => - createStyles({ - root: { - position: "relative" - } - }) -) +import DashboardModule from "../Modules/DashboardModule" const DashboardPage = () => { - const classes = useStyles() return ( -
- - Dashboard - -
+ ) } From 448e562cd3aca36079a343e9780b272cd841f12b Mon Sep 17 00:00:00 2001 From: GitHub Actions Date: Thu, 23 Sep 2021 13:30:52 +0000 Subject: [PATCH 02/10] lingui extract --- packages/gaming-ui/src/locales/en/messages.po | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/packages/gaming-ui/src/locales/en/messages.po b/packages/gaming-ui/src/locales/en/messages.po index e314e4a4a9..ace5a80911 100644 --- a/packages/gaming-ui/src/locales/en/messages.po +++ b/packages/gaming-ui/src/locales/en/messages.po @@ -58,9 +58,18 @@ msgstr "Copied!" msgid "Created At" msgstr "Created At" +msgid "Created on:" +msgstr "Created on:" + +msgid "Dashboard" +msgstr "Dashboard" + msgid "Delete Key" msgstr "Delete Key" +msgid "Delete key" +msgstr "Delete key" + msgid "Didn't receive the email ?" msgstr "Didn't receive the email ?" @@ -97,6 +106,9 @@ msgstr "Hold on, we are logging you in…" msgid "Id" msgstr "Id" +msgid "Id:" +msgstr "Id:" + msgid "Key ID" msgstr "Key ID" @@ -145,6 +157,9 @@ msgstr "Something went wrong! Please try again." msgid "Status" msgstr "Status" +msgid "Status:" +msgstr "Status:" + msgid "Terms and Conditions" msgstr "Terms and Conditions" From 2c134a726d3f0dd19c91726493d47ddd05ed46fd Mon Sep 17 00:00:00 2001 From: ryry79261 Date: Thu, 23 Sep 2021 16:18:19 +0200 Subject: [PATCH 03/10] extra padding --- packages/gaming-ui/src/Components/Elements/ApiKeyCard.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/gaming-ui/src/Components/Elements/ApiKeyCard.tsx b/packages/gaming-ui/src/Components/Elements/ApiKeyCard.tsx index f3ca6c27dd..b4a3070950 100644 --- a/packages/gaming-ui/src/Components/Elements/ApiKeyCard.tsx +++ b/packages/gaming-ui/src/Components/Elements/ApiKeyCard.tsx @@ -13,7 +13,8 @@ const useStyles = makeStyles(({ constants }: CSGTheme) => position: "relative", margin: constants.generalUnit, borderRadius: constants.generalUnit / 2, - maxWidth: 250 + maxWidth: 250, + padding: `${constants.generalUnit * 2}px ${constants.generalUnit}px` }, button: { marginTop: constants.generalUnit * 2 From e1b49c0b4a5a2ab11bd4ad50fba853d6c985d9f4 Mon Sep 17 00:00:00 2001 From: Ryan Noble Date: Thu, 23 Sep 2021 18:16:22 +0200 Subject: [PATCH 04/10] Apply suggestions from code review Co-authored-by: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com> --- .../src/Components/Elements/ApiKeyCard.tsx | 18 ++++++++++++------ .../src/Components/Modules/DashboardModule.tsx | 11 ++++++----- 2 files changed, 18 insertions(+), 11 deletions(-) diff --git a/packages/gaming-ui/src/Components/Elements/ApiKeyCard.tsx b/packages/gaming-ui/src/Components/Elements/ApiKeyCard.tsx index f3ca6c27dd..8c5ac3b400 100644 --- a/packages/gaming-ui/src/Components/Elements/ApiKeyCard.tsx +++ b/packages/gaming-ui/src/Components/Elements/ApiKeyCard.tsx @@ -39,7 +39,8 @@ const ApiKeyCard = ({ apiKey, deleteKey }: IApiKeyCard) => { + component="p" + >  { apiKey.id } { component="p">  { apiKey.secret } */} - + Created on: + component="p" + >  { dayjs(apiKey.created_at).format("DD MMM YYYY h:mm a") } - From 3994c8e69f0bb7873ce535c7276dc148209a1917 Mon Sep 17 00:00:00 2001 From: GitHub Actions Date: Thu, 23 Sep 2021 16:17:29 +0000 Subject: [PATCH 05/10] lingui extract --- packages/gaming-ui/src/locales/en/messages.po | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/gaming-ui/src/locales/en/messages.po b/packages/gaming-ui/src/locales/en/messages.po index ace5a80911..f8700267cb 100644 --- a/packages/gaming-ui/src/locales/en/messages.po +++ b/packages/gaming-ui/src/locales/en/messages.po @@ -28,6 +28,9 @@ msgstr "By connecting your wallet, you agree to our <0>Terms of Service and msgid "Check your inbox! We've sent another email." msgstr "Check your inbox! We've sent another email." +msgid "Close" +msgstr "Close" + msgid "Connect Wallet to Gaming" msgstr "Connect Wallet to Gaming" From 27773c4585ddd83bb35de95413fe0d973fd37664 Mon Sep 17 00:00:00 2001 From: ryry79261 Date: Thu, 23 Sep 2021 18:20:33 +0200 Subject: [PATCH 06/10] Feedback --- .../src/Components/Elements/ApiKeyCard.tsx | 33 +++++-------------- .../src/Components/Layouts/AppNav.tsx | 16 --------- .../Components/Modules/DashboardModule.tsx | 4 +-- 3 files changed, 10 insertions(+), 43 deletions(-) diff --git a/packages/gaming-ui/src/Components/Elements/ApiKeyCard.tsx b/packages/gaming-ui/src/Components/Elements/ApiKeyCard.tsx index d4697c0a9b..a6815430bb 100644 --- a/packages/gaming-ui/src/Components/Elements/ApiKeyCard.tsx +++ b/packages/gaming-ui/src/Components/Elements/ApiKeyCard.tsx @@ -40,9 +40,8 @@ const ApiKeyCard = ({ apiKey, deleteKey }: IApiKeyCard) => { -  { apiKey.id } + component="p"> + { apiKey.id } @@ -53,39 +52,23 @@ const ApiKeyCard = ({ apiKey, deleteKey }: IApiKeyCard) => { -  { apiKey.status } + { apiKey.status } - {/* - - Secret: - - */} - {/* -  { apiKey.secret } - */} - Created on: -  { dayjs(apiKey.created_at).format("DD MMM YYYY h:mm a") } + component="p"> + { dayjs(apiKey.created_at).format("DD MMM YYYY h:mm a") } - - - - - - - - Id - - - Type - - - Status - - - Created At - - {/* Menu */} - - - - {keys.map(k => - - - - {k.id} - - - - - {k.type} - - - - - {k.status} - - - - - {dayjs(k.created_at).format("DD MMM YYYY h:mm a")} - - - - - - - Delete Key - - - ), - onClick: () => deleteAccessKey(k.id) - }]} - classNames={{ - icon: classes.dropdownIcon, - options: classes.dropdownOptions, - item: classes.dropdownItem - }} - indicator={MoreIcon} - /> - - )} - -
- - -
- - New Key - - - Key ID - - {newKey?.id} - - Secret - -
-
- - Make sure to save the secret, as it can only be displayed once. - - {copiedSecret && ( - - Copied! - - )} -
-
- - {newKey?.secret} - - -
-
- -
- - - ) -} - -export default ApiKeys diff --git a/packages/gaming-ui/src/Components/Modules/DashboardModule.tsx b/packages/gaming-ui/src/Components/Modules/DashboardModule.tsx index e7675f23f1..7d75feb1b8 100644 --- a/packages/gaming-ui/src/Components/Modules/DashboardModule.tsx +++ b/packages/gaming-ui/src/Components/Modules/DashboardModule.tsx @@ -220,7 +220,10 @@ const DashboardModule = () => {
- + Make sure to save the secret, as it can only be displayed once. {copiedSecret && ( diff --git a/packages/gaming-ui/src/Components/Pages/SettingsPage.tsx b/packages/gaming-ui/src/Components/Pages/SettingsPage.tsx index d7aa60c146..e1ab8bb179 100644 --- a/packages/gaming-ui/src/Components/Pages/SettingsPage.tsx +++ b/packages/gaming-ui/src/Components/Pages/SettingsPage.tsx @@ -1,21 +1,17 @@ import React, { useCallback } from "react" import { Tabs, - TabPane as TabPaneOrigin, + // TabPane as TabPaneOrigin, Typography, Divider, useParams, - useHistory, - ITabPaneProps, - CaretRightIcon, - LockIcon + useHistory } from "@chainsafe/common-components" import { makeStyles, createStyles, useThemeSwitcher } from "@chainsafe/common-theme" import { ROUTE_LINKS, SettingsPath } from "../GamingRoutes" -import { t, Trans } from "@lingui/macro" +import { Trans } from "@lingui/macro" import clsx from "clsx" -import ApiKeys from "../Modules/ApiKeys" import { CSGTheme } from "../../Themes/types" -const TabPane = (props: ITabPaneProps) => TabPaneOrigin(props) +// const TabPane = (props: ITabPaneProps) => TabPaneOrigin(props) const useStyles = makeStyles(({ constants, breakpoints, palette }: CSGTheme) => createStyles({ title: { @@ -165,16 +161,6 @@ const SettingsPage: React.FC = () => { classes.injectedTabList) }} > - } - iconRight={} - title={t`Api Keys`} - tabKey="apiKeys" - testId="apiKeys-tab" - > - -
} From 9ffbc7cceee02dc7fdd9d2b0c09aaff32c744e21 Mon Sep 17 00:00:00 2001 From: GitHub Actions Date: Mon, 27 Sep 2021 09:34:33 +0000 Subject: [PATCH 10/10] lingui extract --- packages/gaming-ui/src/locales/en/messages.po | 21 ------------------- 1 file changed, 21 deletions(-) diff --git a/packages/gaming-ui/src/locales/en/messages.po b/packages/gaming-ui/src/locales/en/messages.po index f8700267cb..4c44a4d96d 100644 --- a/packages/gaming-ui/src/locales/en/messages.po +++ b/packages/gaming-ui/src/locales/en/messages.po @@ -13,15 +13,9 @@ msgstr "" "Language-Team: \n" "Plural-Forms: \n" -msgid "API Keys" -msgstr "API Keys" - msgid "Add API Key" msgstr "Add API Key" -msgid "Api Keys" -msgstr "Api Keys" - 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" @@ -58,18 +52,12 @@ msgstr "Continue with Web3 Wallet" msgid "Copied!" msgstr "Copied!" -msgid "Created At" -msgstr "Created At" - msgid "Created on:" msgstr "Created on:" msgid "Dashboard" msgstr "Dashboard" -msgid "Delete Key" -msgstr "Delete Key" - msgid "Delete key" msgstr "Delete key" @@ -106,9 +94,6 @@ msgstr "Go back" msgid "Hold on, we are logging you in…" msgstr "Hold on, we are logging you in…" -msgid "Id" -msgstr "Id" - msgid "Id:" msgstr "Id:" @@ -157,9 +142,6 @@ msgstr "Something went wrong!" msgid "Something went wrong! Please try again." msgstr "Something went wrong! Please try again." -msgid "Status" -msgstr "Status" - msgid "Status:" msgstr "Status:" @@ -181,9 +163,6 @@ msgstr "There was an error connecting your wallet" msgid "Try again" msgstr "Try again" -msgid "Type" -msgstr "Type" - msgid "Use a different login method" msgstr "Use a different login method"