diff --git a/.github/workflows/lingui-extract-gaming.yml b/.github/workflows/lingui-extract-gaming.yml deleted file mode 100644 index aca20cda66..0000000000 --- a/.github/workflows/lingui-extract-gaming.yml +++ /dev/null @@ -1,40 +0,0 @@ -name: Lingui extract - Gaming -on: - pull_request: - branches: - - "dev" - paths: - - "packages/gaming-ui/**/*" -jobs: - # extract any new translatable string - # and commit if there are new ones - # and if the user submitting the PR isn't weblate - extract: - name: lingui-extract - runs-on: ubuntu-latest - if: ${{ github.actor != 'weblate' }} - steps: - - uses: actions/checkout@v2 - with: - ref: ${{ github.event.pull_request.head.ref }} - ssh-key: ${{ secrets.LINGUI_GH_ACTION_COMMIT_KEY }} - - name: set user - run: | - git config --global user.name 'GitHub Actions' - git config --global user.email 'actions@github.com' - - # use node module caching - - uses: actions/cache@v2 - with: - path: '**/node_modules' - key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }} - - - name: install packages - run: yarn install --immutable - - - name: lingui-extract and commit - if: ${{ github.actor != 'weblate' }} - run: | - (cd packages/gaming-ui && yarn extract --clean) - git add packages/gaming-ui/src/locales/* - if git commit -m "lingui extract"; then git push; else echo 'exiting successfully without commit'; fi diff --git a/README.md b/README.md index b9736e21ad..18ec6322b1 100644 --- a/README.md +++ b/README.md @@ -20,10 +20,6 @@ Theme context and other utilities for generating and using the theming capabilit The UI for Chainsafe Files -#### **`packages/gaming-ui`** - -The UI for Chainsafe Gaming - #### **`packages/storage-ui`** The UI for Chainsafe Storage diff --git a/package.json b/package.json index a62f07950c..6696a69830 100644 --- a/package.json +++ b/package.json @@ -38,9 +38,6 @@ "build:files-ui": "yarn wsrun -p files-ui -c build", "release:files-ui": "yarn wsrun -p files-ui -c release", "start:files-ui": "yarn wsrun -p files-ui -c start", - "build:gaming-ui": "yarn wsrun -p gaming-ui -c build", - "release:gaming-ui": "yarn wsrun -p gaming-ui -c release", - "start:gaming-ui": "yarn wsrun -p gaming-ui -c start", "build:storage-ui": "yarn wsrun -p storage-ui -c build", "release:storage-ui": "yarn wsrun -p storage-ui -c release", "start:storage-ui": "yarn wsrun -p storage-ui -c start", diff --git a/packages/gaming-ui/.env.example b/packages/gaming-ui/.env.example deleted file mode 100644 index f1c140f7b7..0000000000 --- a/packages/gaming-ui/.env.example +++ /dev/null @@ -1,8 +0,0 @@ -PORT=3000 -HTTPS=false - -REACT_APP_API_URL=https://stage.imploy.site/api/v1 -REACT_APP_BLOCKNATIVE_ID= -REACT_APP_GOOGLE_CLIENT_ID= -REACT_APP_AUTH0_DOMAIN= -REACT_APP_AUTH0_CLIENT_ID= \ No newline at end of file diff --git a/packages/gaming-ui/.gitignore b/packages/gaming-ui/.gitignore deleted file mode 100644 index 9532771241..0000000000 --- a/packages/gaming-ui/.gitignore +++ /dev/null @@ -1,29 +0,0 @@ -# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. - -# dependencies -/node_modules -/.pnp -.pnp.js - -# testing -/coverage - -# production -/build - -# misc -.DS_Store -.env.local -.env.development.local -.env.test.local -.env.production.local - -npm-debug.log* -yarn-debug.log* -yarn-error.log* - -.env - -src/locales/*/messages.js -src/locales/_build - diff --git a/packages/gaming-ui/.linguirc b/packages/gaming-ui/.linguirc deleted file mode 100644 index 1b7ae61f54..0000000000 --- a/packages/gaming-ui/.linguirc +++ /dev/null @@ -1,14 +0,0 @@ -{ - "catalogs": [{ - "path": "/src/locales/{locale}/messages", - "include": ["/src/**"], - "exclude": ["**/node_modules/**", "/src/locales/**"] - }], - "compileNamespace": "cjs", - "format": "po", - "formatOptions": { - "origins": false - }, - "locales": ["en"], - "sourceLocale": "en" -} \ No newline at end of file diff --git a/packages/gaming-ui/.sentryclirc b/packages/gaming-ui/.sentryclirc deleted file mode 100644 index b50913bad5..0000000000 --- a/packages/gaming-ui/.sentryclirc +++ /dev/null @@ -1,3 +0,0 @@ -[defaults] -org=chainsafe -project=gaming-ui diff --git a/packages/gaming-ui/README.md b/packages/gaming-ui/README.md deleted file mode 100644 index cba766f6f8..0000000000 --- a/packages/gaming-ui/README.md +++ /dev/null @@ -1,28 +0,0 @@ -# ChainSafe Gaming UI Repo - -![Dev](https://github.com/imploy/files-ui/workflows/Dev/badge.svg?branch=dev) -[![Netlify Status](https://api.netlify.com/api/v1/badges/cb6afc46-ec5d-4cac-91c2-dbd0d866b89a/deploy-status)](https://app.netlify.com/sites/angry-lewin-719dd6/deploys) -[![Maintainability](https://api.codeclimate.com/v1/badges/6a9b1984bc9622792d3e/maintainability)](https://codeclimate.com/repos/5f0224802dfa0b018f0021b0/maintainability) -[![Test Coverage](https://api.codeclimate.com/v1/badges/6a9b1984bc9622792d3e/test_coverage)](https://codeclimate.com/repos/5f0224802dfa0b018f0021b0/test_coverage) - -## Run development (.env) - -``` -yarn install -yarn start -``` - -## Build production (.env) - -``` -yarn build -``` - -## Run test and test coverage - -``` -yarn test -yarn coverage -``` - -**Visit**: `http://localhost:3000` diff --git a/packages/gaming-ui/craco.config.js b/packages/gaming-ui/craco.config.js deleted file mode 100644 index 16c3b8144d..0000000000 --- a/packages/gaming-ui/craco.config.js +++ /dev/null @@ -1,48 +0,0 @@ -const TerserPlugin = require("terser-webpack-plugin") - -module.exports = { - babel: { - presets: [], - plugins: ["macros"], - loaderOptions: (babelLoaderOptions, { env, paths }) => { - return babelLoaderOptions - } - }, - webpack: { - configure: (webpackConfig) => ({ - ...webpackConfig, - optimization: { - ...webpackConfig.optimization, - minimizer: [ - new TerserPlugin({ - terserOptions: { - parse: { - ecma: 8 - }, - compress: { - ecma: 5, - warnings: false, - comparisons: false, - inline: 2, - drop_console: true - }, - mangle: { - safari10: true - }, - output: { - ecma: 5, - comments: false, - ascii_only: true - } - }, - parallel: 2, - cache: true, - sourceMap: true, - extractComments: false - }) - ] - }, - devtool: "source-map" - }) - } -} diff --git a/packages/gaming-ui/cypress.json b/packages/gaming-ui/cypress.json deleted file mode 100644 index fb59b54133..0000000000 --- a/packages/gaming-ui/cypress.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "integrationFolder": "cypress/tests", - "video": false -} diff --git a/packages/gaming-ui/cypress/fixtures/loginData.ts b/packages/gaming-ui/cypress/fixtures/loginData.ts deleted file mode 100644 index 9852d7c4c4..0000000000 --- a/packages/gaming-ui/cypress/fixtures/loginData.ts +++ /dev/null @@ -1,3 +0,0 @@ -export const testPrivateKey = "0x4fd9a44c051834e28a919096f154e3f805f58d8f2d90a1ab9a29b0b46a6ac363" -export const testAddress = "0xDa1f70D176E0F7F16f2a3bB509cD37Bd36aFD902" -export const localHost = "http://localhost:3000" \ No newline at end of file diff --git a/packages/gaming-ui/cypress/plugins/index.ts b/packages/gaming-ui/cypress/plugins/index.ts deleted file mode 100644 index 77ca4f8215..0000000000 --- a/packages/gaming-ui/cypress/plugins/index.ts +++ /dev/null @@ -1,57 +0,0 @@ -/// -// *********************************************************** -// This example plugins/index.js can be used to load plugins -// -// You can change the location of this file or turn off loading -// the plugins file with the 'pluginsFile' configuration option. -// -// You can read more here: -// https://on.cypress.io/plugins-guide -// *********************************************************** -import { existsSync, readFileSync } from "fs" - -// This function is called when a project is opened or re-opened (e.g. due to -// the project's config changing) - -/** - * @type {Cypress.PluginConfig} - */ - -export default (on: any) => { - // `on` is used to hook into various events Cypress emits - // `config` is the resolved Cypress config - - on("task", { - readFileMaybe(filename: string) { - if (existsSync(filename)) { - return readFileSync(filename, "utf8") - } - - return null - } - }) - - on("before:browser:launch", (browser: Cypress.Browser, launchOptions: Cypress.BrowserLaunchOptions) => { - if (browser.name === "chrome" && browser.isHeadless) { - // fullPage screenshot size is 1280x720 on non-retina screens - launchOptions.args.push("--window-size=1280,720") - - // force screen to be non-retina (1280x720 size) - launchOptions.args.push("--force-device-scale-factor=1") - } - - if (browser.name === "electron" && browser.isHeadless) { - // fullPage screenshot size is 12807200 - launchOptions.preferences.width = 1280 - launchOptions.preferences.height = 720 - } - - if (browser.name === "firefox" && browser.isHeadless) { - // menubars take up height on the screen - launchOptions.args.push("--width=1280") - launchOptions.args.push("--height=720") - } - - return launchOptions - }) -} diff --git a/packages/gaming-ui/cypress/support/commands.ts b/packages/gaming-ui/cypress/support/commands.ts deleted file mode 100644 index 134cb8f541..0000000000 --- a/packages/gaming-ui/cypress/support/commands.ts +++ /dev/null @@ -1,171 +0,0 @@ -/* eslint-disable @typescript-eslint/no-namespace */ -// *********************************************** -// This example commands.js shows you how to -// create various custom commands and overwrite -// existing commands. -// -// For more comprehensive examples of custom -// commands please read more here: -// https://on.cypress.io/custom-commands -// *********************************************** -// -// -// -- This is a parent command -- -// Cypress.Commands.add("login", (email, password) => { ... }) -// -// -// -- This is a child command -- -// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... }) -// -// -// -- This is a dual command -- -// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... }) -// -// -// -- This will overwrite an existing command -- -// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... }) - -import { authenticationPage } from "./page-objects/authenticationPage" -import { ethers, Wallet } from "ethers" -import { testPrivateKey, localHost } from "../fixtures/loginData" -import { CustomizedBridge } from "./utils/CustomBridge" -import "cypress-file-upload" -import { cidsPage } from "./page-objects/cidsPage" - -export type Storage = Record[]; - -export interface Web3LoginOptions { - url?: string - apiUrlBase?: string - saveBrowser?: boolean - useLocalAndSessionStorage?: boolean - clearCSFBucket?: boolean - clearTrashBucket?: boolean -} - -const SESSION_FILE = "cypress/fixtures/storage/sessionStorage.json" -const LOCAL_FILE = "cypress/fixtures/storage/localStorage.json" - -Cypress.Commands.add("saveLocalAndSession", () => { - // save local and session storage in files - cy.window().then((win) => { - const newLocal: Storage = [] - const newSession: Storage = [] - - Object.keys(win.localStorage).forEach((key) => { - newLocal.push({ key, value: win.localStorage.getItem(key) || "" }) - }) - - Object.keys(win.sessionStorage).forEach((key) => { - newSession.push({ key, value: win.sessionStorage.getItem(key) || "" }) - }) - - const newLocalString = JSON.stringify(newLocal) - const newSessionString = JSON.stringify(newSession) - - cy.writeFile(SESSION_FILE, newSessionString) - cy.writeFile(LOCAL_FILE, newLocalString) - }) -}) - -Cypress.Commands.add( - "web3Login", - ({ - url = localHost, - // apiUrlBase = "https://stage.imploy.site/api/v1", - useLocalAndSessionStorage = true - }: Web3LoginOptions = {}) => { - let session: Storage = [] - let local: Storage = [] - - cy.task("readFileMaybe", SESSION_FILE).then( - (unparsedSession) => { - session = (unparsedSession && JSON.parse(unparsedSession)) || [] - } - ) - - cy.task("readFileMaybe", LOCAL_FILE).then( - (unparsedLocal) => { - local = (unparsedLocal && JSON.parse(unparsedLocal)) || [] - } - ) - - cy.on("window:before:load", (win) => { - const provider = new ethers.providers.JsonRpcProvider( - "https://rinkeby.infura.io/v3/4bf032f2d38a4ed6bb975b80d6340847", - 4 - ) - const signer = new Wallet(testPrivateKey, provider) - // inject ethereum object in the global window - Object.defineProperty(win, "ethereum", { - get: () => new CustomizedBridge(signer as any, provider as any) - }) - - // clear session storage in any case, if previous session storage should be - // kept will be decided after. - // Note that Cypress keep the session storage between test but clears localStorage - win.sessionStorage.clear() - win.localStorage.clear() - - if (useLocalAndSessionStorage) { - session.forEach(({ key, value }) => { - win.sessionStorage.setItem(key, value) - }) - - local.forEach(({ key, value }) => { - win.localStorage.setItem(key, value) - }) - } - }) - - cy.visit(url) - - // with nothing in localstorage (and in session storage) - // the whole login flow should kick in - cy.then(() => { - cy.log( - "Logging in", - local.length > 0 && - "there is something in session storage ---> direct login" - ) - - if (local.length === 0) { - cy.log("nothing in session storage, --> click on web3 button") - authenticationPage.web3Button().click() - authenticationPage.metaMaskButton().click() - authenticationPage.web3SignInButton().click() - } - }) - - cidsPage.cidsHeaderLabel().should("be.visible") - - cy.saveLocalAndSession() - - } -) - -// Must be declared global to be detected by typescript (allows import/export) -// eslint-disable @typescript/interface-name -declare global { - namespace Cypress { - interface Chainable { - /** - * Login using Metamask to an instance of Files. - * @param {String} options.url - (default: "http://localhost:3000") - what url to visit. - * @param {String} apiUrlBase - (default: "https://stage.imploy.site/api/v1") - what url to call for the api. - * @param {Boolean} options.useLocalAndSessionStorage - (default: true) - use what could have been stored before to speedup login - * @example cy.web3Login({saveBrowser: true, url: 'http://localhost:8080'}) - */ - web3Login: (options?: Web3LoginOptions) => Chainable - - /** - * Save local and session storage to local files - * @example cy.saveLocalAndSession() - */ - saveLocalAndSession: () => Chainable - } - } -} - -// Convert this to a module instead of script (allows import/export) -export {} diff --git a/packages/gaming-ui/cypress/support/index.ts b/packages/gaming-ui/cypress/support/index.ts deleted file mode 100644 index cb8233c617..0000000000 --- a/packages/gaming-ui/cypress/support/index.ts +++ /dev/null @@ -1,32 +0,0 @@ -/// -// *********************************************************** -// This example support/index.js is processed and -// loaded automatically before your test files. -// -// This is a great place to put global configuration and -// behavior that modifies Cypress. -// -// You can change the location of this file or turn off -// automatically serving support files with the -// 'supportFile' configuration option. -// -// You can read more here: -// https://on.cypress.io/configuration -// *********************************************************** -// Import commands.js using ES2015 syntax: -import "./commands" - -// the following gets rid of the exception "ResizeObserver loop limit exceeded" -// which someone on the internet says we can safely ignore -// source https://stackoverflow.com/questions/49384120/resizeobserver-loop-limit-exceeded -Cypress.on("uncaught:exception", (err) => { - /* returning false here prevents Cypress from failing the test */ - if (err.message.includes("ResizeObserver loop limit exceeded")) { - // returning false here prevents Cypress from - // failing the test - return false - } -}) - -// Alternatively you can use CommonJS syntax: -// require('./commands') diff --git a/packages/gaming-ui/cypress/support/page-objects/authenticationPage.ts b/packages/gaming-ui/cypress/support/page-objects/authenticationPage.ts deleted file mode 100644 index ccd7a616d2..0000000000 --- a/packages/gaming-ui/cypress/support/page-objects/authenticationPage.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { basePage } from "./basePage" - -export const authenticationPage = { - ...basePage, - - // get started section elements - web3Button: () => cy.get("[data-cy=web3]", { timeout: 120000 }), - metaMaskButton: () => cy.get(".bn-onboard-modal-select-wallets > :nth-child(1) > .bn-onboard-custom"), - web3SignInButton: () => cy.get("[data-cy=sign-in-with-web3-button]") -} diff --git a/packages/gaming-ui/cypress/support/page-objects/basePage.ts b/packages/gaming-ui/cypress/support/page-objects/basePage.ts deleted file mode 100644 index bcf8f88e52..0000000000 --- a/packages/gaming-ui/cypress/support/page-objects/basePage.ts +++ /dev/null @@ -1,6 +0,0 @@ -// Only add things here that could be applicable to all / most pages - -export const basePage = { - // Mobile view only element - hamburgerMenuButton: () => cy.get("[data-testId=hamburger-menu]") -} diff --git a/packages/gaming-ui/cypress/support/page-objects/homePage.ts b/packages/gaming-ui/cypress/support/page-objects/homePage.ts deleted file mode 100644 index b2a30da731..0000000000 --- a/packages/gaming-ui/cypress/support/page-objects/homePage.ts +++ /dev/null @@ -1,64 +0,0 @@ -import { basePage } from "./basePage" - -export const click = ($el: JQuery) => $el.trigger("click") - -export const homePage = { - ...basePage - - // // main file browser elements - // uploadButton: () => cy.get("[data-cy=upload-modal-button]"), - // uploadFileForm: () => cy.get("[data-cy=upload-file-form] input", { timeout: 20000 }), - // moveSelectedButton: () => cy.get("[data-testId=button-move-selected-file]"), - // deleteSelectedButton: () => cy.get("[data-testId=button-delete-selected-file]"), - // deleteFileDialog: () => cy.get("[data-testid=modal-container-file-deletion]"), - // deleteFileCancelButton: () => cy.get("[data-testid=button-cancel-deletion]"), - // deleteFileConfirmButton: () => cy.get("[data-testid=button-confirm-deletion]"), - // uploadStatusToast: () => cy.get("[data-cy=upload-status-toast-message]", { timeout: 10000 }), - - // // file browser row elements - // fileItemRow: () => cy.get("[data-cy=file-item-row]", { timeout: 20000 }), - // fileItemName: () => cy.get("[data-cy=file-item-name]"), - // fileRenameInput: () => cy.get("[data-cy=rename-form] input"), - // fileRenameSubmitButton: () => cy.get("[data-cy=rename-submit-button]"), - // fileRenameErrorLabel: () => cy.get("[data-cy=rename-form] span.minimal.error"), - // fileItemKebabButton: () => cy.get("[data-testid=dropdown-title-fileDropdown]"), - - // // upload modal elements - // startUploadButton: () => cy.get("[data-testId=button-start-upload]"), - // uploadCancelButton: () => cy.get("[data-testId=button-cancel-upload]"), - // fileListRemoveButton: () => cy.get("[data-testid=button-remove-from-file-list]"), - // fileUploadList: () => cy.get("[data-testid=file-list-fileUpload] li"), - // fileUploadDropzone : () => cy.get("[data-testid=file-input-dropzone-fileUpload]"), - - // // menu elements - // previewMenuOption: () => cy.get("[data-cy=menu-preview]"), - // downloadMenuOption: () => cy.get("[data-cy=menu-download]"), - // infoMenuOption: () => cy.get("[data-cy=menu-info]"), - // renameMenuOption: () => cy.get("[data-cy=menu-rename]"), - // moveMenuOption: () => cy.get("[data-cy=menu-move]"), - // deleteMenuOption: () => cy.get("[data-cy=menu-delete]"), - - // clickUploadButton: () => homePage.startUploadButton() - // .should("not.be.disabled") - // // this pipe is needed to prevent https://github.com/ChainSafe/ui-monorepo/issues/1146 - // // as described https://www.cypress.io/blog/2019/01/22/when-can-the-test-click/ - // .pipe(click) - // .should(($el: JQuery) => { - // expect($el).to.not.be.visible - // }), - - // // helpers and convenience functions - // uploadFile(filePath: string) { - // this.uploadButton().click() - // this.uploadFileForm().attachFile(filePath) - // this.fileUploadList().should("have.length", 1) - // this.fileListRemoveButton().should("be.visible") - // this.clickUploadButton() - - // // ensure upload is complete before proceeding - // this.uploadFileForm().should("not.exist") - // this.uploadStatusToast().should("not.exist") - // } - -} - diff --git a/packages/gaming-ui/cypress/support/page-objects/navigationMenu.ts b/packages/gaming-ui/cypress/support/page-objects/navigationMenu.ts deleted file mode 100644 index a8fab10caf..0000000000 --- a/packages/gaming-ui/cypress/support/page-objects/navigationMenu.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { basePage } from "./basePage" - -export const navigationMenu = { - ...basePage, - homeNavButton: () => cy.get("[data-cy=home-nav]"), - settingsNavButton: () => cy.get("[data-cy=settings-nav]") - // spaceUsedLabel: () => cy.get("[data-cy=space-used-label]"), - // spaceUsedProgressBar: () => cy.get("[data-cy=space-used-progress-bar]"), - // sendFeedbackNavButton: () => cy.get("[data-cy=send-feedback-nav]"), - // signOutButton: () => cy.get("[data-cy=signout-nav]") -} diff --git a/packages/gaming-ui/cypress/support/page-objects/settingsPage.ts b/packages/gaming-ui/cypress/support/page-objects/settingsPage.ts deleted file mode 100644 index 40f6cf9bfe..0000000000 --- a/packages/gaming-ui/cypress/support/page-objects/settingsPage.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { basePage } from "./basePage" - -export const settingsPage = { - ...basePage - -} diff --git a/packages/gaming-ui/cypress/support/utils/CustomBridge.ts b/packages/gaming-ui/cypress/support/utils/CustomBridge.ts deleted file mode 100644 index 4924ecbbff..0000000000 --- a/packages/gaming-ui/cypress/support/utils/CustomBridge.ts +++ /dev/null @@ -1,82 +0,0 @@ -import { Eip1193Bridge } from "@ethersproject/experimental/lib/eip1193-bridge" -import { toUtf8String } from "ethers/lib/utils" -import { testAddress } from "../../fixtures/loginData" - -export class CustomizedBridge extends Eip1193Bridge { - async sendAsync(...args: Array) { - return this.send(...args) - } - - async isMetaMask() { - return true - } - - async send(...args: Array) { - const isCallbackForm = typeof args[0] === "object" && typeof args[1] === "function" - let callback - let method - let params - if (isCallbackForm) { - callback = args[1] - method = args[0].method - params = args[0].params - } else { - method = args[0] - params = args[1] - } - - if (method === "personal_sign") { - const addr = params[1] - const message = params[0] - - if ( - (addr as string).toLowerCase() !== testAddress.toLowerCase() - ) { - return Promise.reject( - `Wrong address, expected ${testAddress}, but got ${addr}` - ) - } - - try { - const sig = await this.signer.signMessage(toUtf8String(message)) - return sig - } catch (e) { - return Promise.reject( - `Error in CustomizedBridge for personal_sign: ${e.message}` - ) - } - } - - if (method === "eth_requestAccounts" || method === "eth_accounts") { - if (isCallbackForm) { - callback({ result: [testAddress] }) - } else { - return Promise.resolve([testAddress]) - } - } - - if (method === "eth_chainId") { - if (isCallbackForm) { - callback(null, { result: "0x4" }) - } else { - return Promise.resolve("0x4") - } - } - - try { - const result = await super.send(method, params) - - if (isCallbackForm) { - callback(null, { result }) - } else { - return result - } - } catch (error) { - if (isCallbackForm) { - callback(error, null) - } else { - throw error - } - } - } -} \ No newline at end of file diff --git a/packages/gaming-ui/cypress/support/utils/apiTestHelper.ts b/packages/gaming-ui/cypress/support/utils/apiTestHelper.ts deleted file mode 100644 index 7f34ea2f37..0000000000 --- a/packages/gaming-ui/cypress/support/utils/apiTestHelper.ts +++ /dev/null @@ -1,9 +0,0 @@ -// import axios from "axios" -// import { FilesApiClient } from "@chainsafe/files-api-client" -// import { BucketType } from "@chainsafe/files-api-client" - -// const REFRESH_TOKEN_KEY = "csf.refreshToken" - -// export const apiTestHelper = { - -// } diff --git a/packages/gaming-ui/cypress/tests/main-navigation-spec.ts b/packages/gaming-ui/cypress/tests/main-navigation-spec.ts deleted file mode 100644 index b9a998cf33..0000000000 --- a/packages/gaming-ui/cypress/tests/main-navigation-spec.ts +++ /dev/null @@ -1,32 +0,0 @@ -import { navigationMenu } from "../support/page-objects/navigationMenu" -import { homePage } from "../support/page-objects/homePage" - -describe("Main Navigation", () => { - - context("desktop", () => { - before(() => { - cy.web3Login() - }) - - it("can navigate to the cids page", () => { - navigationMenu.settingsNavButton().click() - cy.url().should("include", "/cids") - }) - }) - - context("mobile", () => { - before(() => { - cy.web3Login() - }) - - beforeEach(() => { - cy.viewport("iphone-6") - homePage.hamburgerMenuButton().click() - }) - - it("can navigate to the cids page", () => { - navigationMenu.settingsNavButton().click() - cy.url().should("include", "/cids") - }) - }) -}) diff --git a/packages/gaming-ui/cypress/tsconfig.json b/packages/gaming-ui/cypress/tsconfig.json deleted file mode 100644 index c58896952f..0000000000 --- a/packages/gaming-ui/cypress/tsconfig.json +++ /dev/null @@ -1,10 +0,0 @@ -{ - "compilerOptions": { - "strict": true, - "target": "es5", - "jsx": "react", - "lib": ["es5", "dom"], - "types": ["cypress", "cypress-file-upload"] - }, - "include": ["**/*.ts"] - } \ No newline at end of file diff --git a/packages/gaming-ui/package.json b/packages/gaming-ui/package.json deleted file mode 100644 index e0112066d4..0000000000 --- a/packages/gaming-ui/package.json +++ /dev/null @@ -1,89 +0,0 @@ -{ - "name": "gaming-ui", - "version": "1.0.0", - "private": true, - "dependencies": { - "@babel/core": "^7.12.10", - "@babel/runtime": "^7.0.0", - "@chainsafe/browser-storage-hooks": "^1.0.1", - "@chainsafe/files-api-client": "^1.18.20", - "@chainsafe/web3-context": "1.1.4", - "@lingui/core": "^3.7.2", - "@lingui/react": "^3.7.2", - "@sentry/react": "^5.28.0", - "@toruslabs/torus-direct-web-sdk": "4.15.1", - "axios": "0.21.4", - "babel-loader": "8.1.0", - "babel-plugin-macros": "^2.8.0", - "babel-preset-env": "^1.7.0", - "babel-preset-react": "^6.24.1", - "bnc-onboard": "1.32.0", - "clsx": "^1.1.1", - "dayjs": "^1.9.7", - "eth-crypto": "^1.8.0", - "ethers": "^5.4.3", - "formik": "^2.2.5", - "mime-matcher": "^1.0.5", - "react": "^16.14.0", - "react-dom": "^16.14.0", - "react-hotkeys-hook": "^2.4.0", - "react-scripts": "3.4.4", - "react-swipeable": "^6.0.1", - "react-toast-notifications": "^2.4.0", - "react-use-hotjar": "1.0.8", - "react-zoom-pan-pinch": "^1.6.1", - "remark-gfm": "^1.0.0", - "typescript": "~4.0.5", - "yup": "^0.32.8", - "zxcvbn": "^4.4.2" - }, - "devDependencies": { - "@craco/craco": "^5.9.0", - "@ethersproject/experimental": "^5.1.2", - "@lingui/babel-preset-react": "^2.9.2", - "@lingui/cli": "^3.7.2", - "@lingui/macro": "3.7.2", - "@testing-library/jest-dom": "^5.11.6", - "@testing-library/react": "^11.2.2", - "@testing-library/user-event": "^12.5.0", - "@types/jest": "^26.0.16", - "@types/node": "^14.14.10", - "@types/react": "^17.0.0", - "@types/react-beforeunload": "^2.1.0", - "@types/react-dom": "^16.9.10", - "@types/react-pdf": "^5.0.0", - "@types/react-toast-notifications": "^2.4.0", - "@types/yup": "^0.29.9", - "@types/zxcvbn": "^4.4.0", - "babel-plugin-macros": "^2.8.0", - "cypress": "^9.1.0", - "cypress-file-upload": "^5.0.8", - "cypress-pipe": "^2.0.0" - }, - "scripts": { - "postinstall": "yarn compile", - "start": "yarn compile && craco --max_old_space_size=4096 start", - "build": "craco --max_old_space_size=4096 --openssl-legacy-provider build ", - "sentry": "(export REACT_APP_SENTRY_RELEASE=$(sentry-cli releases propose-version); node scripts/sentry.js)", - "release": "(export REACT_APP_SENTRY_RELEASE=$(sentry-cli releases propose-version); yarn compile && yarn build && node scripts/sentry.js)", - "test": "cypress open", - "test:ci": "cypress run --browser chrome --headless", - "analyze": "source-map-explorer 'build/static/js/*.js'", - "extract": "lingui extract", - "compile": "lingui compile", - "lingui-version": "lingui --version", - "lint": "eslint './{src, cypress}/**/*.{js,jsx,ts,tsx}'" - }, - "browserslist": { - "production": [ - ">0.2%", - "not dead", - "not op_mini all" - ], - "development": [ - "last 1 chrome version", - "last 1 firefox version", - "last 1 safari version" - ] - } -} diff --git a/packages/gaming-ui/public/ChainSafe-logo.png b/packages/gaming-ui/public/ChainSafe-logo.png deleted file mode 100644 index cfffdc4a82..0000000000 Binary files a/packages/gaming-ui/public/ChainSafe-logo.png and /dev/null differ diff --git a/packages/gaming-ui/public/_redirects b/packages/gaming-ui/public/_redirects deleted file mode 100644 index 50a463356b..0000000000 --- a/packages/gaming-ui/public/_redirects +++ /dev/null @@ -1 +0,0 @@ -/* /index.html 200 \ No newline at end of file diff --git a/packages/gaming-ui/public/android-chrome-192x192.png b/packages/gaming-ui/public/android-chrome-192x192.png deleted file mode 100644 index cfffdc4a82..0000000000 Binary files a/packages/gaming-ui/public/android-chrome-192x192.png and /dev/null differ diff --git a/packages/gaming-ui/public/android-chrome-512x512.png b/packages/gaming-ui/public/android-chrome-512x512.png deleted file mode 100644 index 300ed95cd2..0000000000 Binary files a/packages/gaming-ui/public/android-chrome-512x512.png and /dev/null differ diff --git a/packages/gaming-ui/public/apple-touch-icon.png b/packages/gaming-ui/public/apple-touch-icon.png deleted file mode 100644 index cfffdc4a82..0000000000 Binary files a/packages/gaming-ui/public/apple-touch-icon.png and /dev/null differ diff --git a/packages/gaming-ui/public/favicon-16x16.png b/packages/gaming-ui/public/favicon-16x16.png deleted file mode 100644 index c515dca67e..0000000000 Binary files a/packages/gaming-ui/public/favicon-16x16.png and /dev/null differ diff --git a/packages/gaming-ui/public/favicon-32x32.png b/packages/gaming-ui/public/favicon-32x32.png deleted file mode 100644 index ee6522854f..0000000000 Binary files a/packages/gaming-ui/public/favicon-32x32.png and /dev/null differ diff --git a/packages/gaming-ui/public/favicon.ico b/packages/gaming-ui/public/favicon.ico deleted file mode 100644 index 6333263689..0000000000 Binary files a/packages/gaming-ui/public/favicon.ico and /dev/null differ diff --git a/packages/gaming-ui/public/index.html b/packages/gaming-ui/public/index.html deleted file mode 100644 index a955172684..0000000000 --- a/packages/gaming-ui/public/index.html +++ /dev/null @@ -1,58 +0,0 @@ - - - - - - - - - - - - - - - - - ChainSafe Gaming - - - -
- - - diff --git a/packages/gaming-ui/public/manifest.json b/packages/gaming-ui/public/manifest.json deleted file mode 100644 index 5bb42011c2..0000000000 --- a/packages/gaming-ui/public/manifest.json +++ /dev/null @@ -1,15 +0,0 @@ -{ - "short_name": "Chainsafe Gaming", - "name": "Chainsafe Gaming", - "icons": [ - { - "src": "ChainSafe-logo.png", - "sizes": "64x64 32x32 24x24 16x16", - "type": "image/x-icon" - } - ], - "start_url": ".", - "display": "standalone", - "theme_color": "#000000", - "background_color": "#ffffff" -} diff --git a/packages/gaming-ui/public/robots.txt b/packages/gaming-ui/public/robots.txt deleted file mode 100644 index e9e57dc4d4..0000000000 --- a/packages/gaming-ui/public/robots.txt +++ /dev/null @@ -1,3 +0,0 @@ -# https://www.robotstxt.org/robotstxt.html -User-agent: * -Disallow: diff --git a/packages/gaming-ui/public/serviceworker/redirect.html b/packages/gaming-ui/public/serviceworker/redirect.html deleted file mode 100644 index 3ed34e79f7..0000000000 --- a/packages/gaming-ui/public/serviceworker/redirect.html +++ /dev/null @@ -1,316 +0,0 @@ - - - - - - - Redirect - - - - -
- -

- You can close this window now -

-
- - - - diff --git a/packages/gaming-ui/public/serviceworker/sw.js b/packages/gaming-ui/public/serviceworker/sw.js deleted file mode 100644 index e49ffdfb2b..0000000000 --- a/packages/gaming-ui/public/serviceworker/sw.js +++ /dev/null @@ -1,312 +0,0 @@ -// This service worker handles all OAuth redirects and calls, as well as parsing -// tokens returned, parsing said tokens and communication with the DirectAuth SDK. -// For more information see https://github.com/torusresearch/torus-direct-web-sdk/blob/master/README.md -// and https://docs.tor.us/direct-auth/integrating-directauth - -/* eslint-disable */ -function getScope() { - return self.registration.scope; -} - -self.addEventListener("message", function (event) { - if (event.data && event.data.type === "SKIP_WAITING") { - self.skipWaiting(); - } -}); - -self.addEventListener("fetch", function (event) { - try { - const url = new URL(event.request.url); - if (url.pathname.includes("redirect") && url.href.includes(getScope())) { - event.respondWith( - new Response( - new Blob( - [ - ` - - - - - - - Redirect - - - -
- -

You can close this window now

-
- - - - - -${""} - `, - ], - { type: "text/html" } - ) - ) - ); - } - } catch (error) { - console.error(error); - } -}); diff --git a/packages/gaming-ui/public/site.webmanifest b/packages/gaming-ui/public/site.webmanifest deleted file mode 100644 index d3f31c43ac..0000000000 --- a/packages/gaming-ui/public/site.webmanifest +++ /dev/null @@ -1,19 +0,0 @@ -{ - "short_name": "Chainsafe Gaming", - "name": "Chainsafe Gaming", - "icons": [ - { - "src": "/android-chrome-192x192.png", - "sizes": "192x192", - "type": "image/png" - }, - { - "src": "/android-chrome-512x512.png", - "sizes": "512x512", - "type": "image/png" - } - ], - "theme_color": "#ffffff", - "background_color": "#ffffff", - "display": "standalone" -} diff --git a/packages/gaming-ui/scripts/sentry.js b/packages/gaming-ui/scripts/sentry.js deleted file mode 100644 index efa38ef60a..0000000000 --- a/packages/gaming-ui/scripts/sentry.js +++ /dev/null @@ -1,37 +0,0 @@ -const SentryCli = require("@sentry/cli") -const dotenv = require("dotenv") -dotenv.config() - -async function createReleaseAndUpload() { - const release = process.env.REACT_APP_SENTRY_RELEASE - const environment = process.env.REACT_APP_SENTRY_ENV - - if (!release || !environment) { - console.warn("REACT_APP_SENTRY_RELEASE or REACT_APP_SENTRY_ENV is not set") - return - } - - const cli = new SentryCli() - - try { - console.log("Creating sentry release " + release) - await cli.releases.new(release) - - console.log("Uploading source maps") - await cli.releases.uploadSourceMaps(release, { - include: ["build/static/js"], - rewrite: true, - validate: true, - }) - - console.log("Finalizing release") - // await cli.releases.setCommits(release, {auto: true}) - await cli.releases.newDeploy(release, { env: environment }) - - await cli.releases.finalize(release) - } catch (e) { - console.error("Creating a release on Sentry failed.", e) - } -} - -createReleaseAndUpload() diff --git a/packages/gaming-ui/src/App.tsx b/packages/gaming-ui/src/App.tsx deleted file mode 100644 index ea78e7f068..0000000000 --- a/packages/gaming-ui/src/App.tsx +++ /dev/null @@ -1,121 +0,0 @@ -import React, { useCallback } from "react" -import { init as initSentry, ErrorBoundary, showReportDialog } from "@sentry/react" -import { Web3Provider } from "@chainsafe/web3-context" -import { ThemeSwitcher } from "@chainsafe/common-theme" -import "@chainsafe/common-theme/dist/font-faces.css" -import { Button, CssBaseline, Modal, Router, ToastProvider, Typography } from "@chainsafe/common-components" -import StorageRoutes from "./Components/GamingRoutes" -import AppWrapper from "./Components/Layouts/AppWrapper" -import { LanguageProvider } from "./Contexts/LanguageContext" -import { lightTheme } from "./Themes/LightTheme" -import { darkTheme } from "./Themes/DarkTheme" -import { useLocalStorage } from "@chainsafe/browser-storage-hooks" -import { GamingApiProvider } from "./Contexts/GamingApiContext" -import { UserProvider } from "./Contexts/UserContext" - -if ( - process.env.NODE_ENV === "production" && - process.env.REACT_APP_SENTRY_DSN_URL -) { - initSentry({ - dsn: process.env.REACT_APP_SENTRY_DSN_URL, - release: process.env.REACT_APP_SENTRY_RELEASE, - environment: process.env.REACT_APP_SENTRY_ENV - }) -} - -const availableLanguages = [ - { id: "en", label: "English" } -] - -const onboardConfig = { - dappId: process.env.REACT_APP_BLOCKNATIVE_ID || "", - walletSelect: { - wallets: [ - { walletName: "coinbase" }, - { - walletName: "trust", - rpcUrl: - "https://mainnet.infura.io/v3/a7e16429d2254d488d396710084e2cd3" - }, - { walletName: "metamask", preferred: true }, - { walletName: "authereum" }, - { walletName: "opera" }, - { walletName: "operaTouch" }, - { walletName: "torus" }, - { walletName: "status" }, - { - walletName: "walletConnect", - infuraKey: "a7e16429d2254d488d396710084e2cd3", - preferred: true - } - ] - } -} - -const App = () => { - const { canUseLocalStorage } = useLocalStorage() - const apiUrl = process.env.REACT_APP_API_URL || "https://stage.imploy.site/api/v1" - // This will default to testnet unless mainnet is specifically set in the ENV - - const fallBack = useCallback(({ error, componentStack, eventId, resetError }) => ( - - - An error occurred and has been logged. If you would like to - provide additional info to help us debug and resolve the issue, - click the `"`Provide Additional Details`"` button - - {error?.message.toString()} - {componentStack} - {eventId} - - - - ), []) - - return ( - - window.location.reload()} - > - - - - - - - - - - - - - - - - - - - ) -} - -export default App diff --git a/packages/gaming-ui/src/Components/Elements/ApiKeyCard.tsx b/packages/gaming-ui/src/Components/Elements/ApiKeyCard.tsx deleted file mode 100644 index db489b7d8b..0000000000 --- a/packages/gaming-ui/src/Components/Elements/ApiKeyCard.tsx +++ /dev/null @@ -1,86 +0,0 @@ -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, - padding: `${constants.generalUnit * 2}px ${constants.generalUnit}px` - }, - 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 } - - - - 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/Elements/CustomButton.tsx b/packages/gaming-ui/src/Components/Elements/CustomButton.tsx deleted file mode 100644 index 3d9de50746..0000000000 --- a/packages/gaming-ui/src/Components/Elements/CustomButton.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import { Button, IButtonProps } from "@chainsafe/common-components" -import { createStyles, ITheme, makeStyles } from "@chainsafe/common-theme" -import React, { ReactNode } from "react" -import clsx from "clsx" - -const useStyles = makeStyles(({ palette }: ITheme) => - createStyles({ - root: { - "&.gray": { - backgroundColor: palette.additional["gray"][3], - color: palette.additional["gray"][9] - } - } - }) -) - -const CUSTOM_VARIANTS = ["gray"] - -const temp = [...CUSTOM_VARIANTS] -type customVariant = typeof temp[0] - -type buttonVariant = IButtonProps["variant"] | customVariant - -interface ICustomButton extends Omit { - children: ReactNode - variant?: buttonVariant - className?: string -} - -const CustomButton: React.FC = ({ - className, - children, - variant, - ...rest -}: ICustomButton) => { - const classes = useStyles() - - const setVariant = - variant && CUSTOM_VARIANTS.includes(variant) - ? "primary" - : variant || "primary" - - return ( - - ) -} - -export default CustomButton diff --git a/packages/gaming-ui/src/Components/Elements/CustomModal.tsx b/packages/gaming-ui/src/Components/Elements/CustomModal.tsx deleted file mode 100644 index 224b120ab3..0000000000 --- a/packages/gaming-ui/src/Components/Elements/CustomModal.tsx +++ /dev/null @@ -1,61 +0,0 @@ -import { IModalProps, Modal } from "@chainsafe/common-components" -import { createStyles, makeStyles } from "@chainsafe/common-theme" -import React, { ReactNode } from "react" -import clsx from "clsx" -import { CSGTheme } from "../../Themes/types" - -const useStyles = makeStyles(({ constants, breakpoints }: CSGTheme) => - createStyles({ - root: { - "&:before": { - backgroundColor: constants.modalDefault.fadeBackground - } - }, - inner: { - [breakpoints.down("md")]: { - backgroundColor: constants.modalDefault.background, - top: "unset", - bottom: 0, - left: 0, - width: "100% !important", - transform: "unset", - borderRadiusLeftTop: `${constants.generalUnit * 1.5}px`, - borderRadiusRightTop: `${constants.generalUnit * 1.5}px`, - borderRadiusLeftBottom: 0, - borderRadiusRightBottom: 0 - } - }, - closeIcon: { - [breakpoints.down("md")]: {} - } - }) -) - -interface ICustomModal extends IModalProps { - children: ReactNode - className?: string -} - -const CustomModal: React.FC = ({ - className, - children, - injectedClass, - ...rest -}: ICustomModal) => { - const classes = useStyles() - - return ( - - {children} - - ) -} - -export default CustomModal diff --git a/packages/gaming-ui/src/Components/Elements/SecretField.tsx b/packages/gaming-ui/src/Components/Elements/SecretField.tsx deleted file mode 100644 index ba059aa666..0000000000 --- a/packages/gaming-ui/src/Components/Elements/SecretField.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import React, { useCallback, useState } from "react" -import { EyeOpenIcon, EyeClosedIcon, Typography } from "@chainsafe/common-components" -import { makeStyles, createStyles } from "@chainsafe/common-theme" - -interface Props { - value: string -} - -const useStyles = makeStyles(() => - createStyles({ - root: { - display: "flex", - justifyContent: "space-between" - } - }) -) - -const SecretField = ({ value }: Props) => { - const [showValue, setShowValue] = useState(false) - const classes = useStyles() - - const toggleShowValue = useCallback(() => { - setShowValue(!showValue) - }, [showValue]) - - return ( -
- {showValue ? value : "⚫⚫⚫⚫⚫⚫⚫⚫⚫" } - {showValue ? : } -
- ) -} - -export default SecretField \ No newline at end of file diff --git a/packages/gaming-ui/src/Components/GamingRoutes.tsx b/packages/gaming-ui/src/Components/GamingRoutes.tsx deleted file mode 100644 index 3936871e6b..0000000000 --- a/packages/gaming-ui/src/Components/GamingRoutes.tsx +++ /dev/null @@ -1,51 +0,0 @@ -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 DashboardPage from "./Pages/DashboardPage" - -export const SETTINGS_PATHS = ["apiKeys"] as const -export type SettingsPath = typeof SETTINGS_PATHS[number] - -export const ROUTE_LINKS = { - Landing: "/", - Dashboard: "/dashboard", - SettingsRoot: "/settings", - Settings: (path: SettingsPath) => `/settings/${path}`, - PrivacyPolicy: "https://files.chainsafe.io/privacy-policy", - Terms: "https://files.chainsafe.io/terms-of-service", - ChainSafe: "https://chainsafe.io/" -} - -const GamingRoutes = () => { - const { isLoggedIn } = useGamingApi() - - return ( - - - - - - ) -} - -export default GamingRoutes diff --git a/packages/gaming-ui/src/Components/Layouts/AppHeader.tsx b/packages/gaming-ui/src/Components/Layouts/AppHeader.tsx deleted file mode 100644 index 45ed28b61a..0000000000 --- a/packages/gaming-ui/src/Components/Layouts/AppHeader.tsx +++ /dev/null @@ -1,232 +0,0 @@ -import React, { useCallback } from "react" -import { createStyles, makeStyles, useThemeSwitcher } from "@chainsafe/common-theme" -import clsx from "clsx" -import { - Link, - Typography, - ChainsafeLogo, - HamburgerMenu, - MenuDropdown, - PowerDownSvg, - useHistory -} from "@chainsafe/common-components" -import { ROUTE_LINKS } from "../GamingRoutes" -import { Trans } from "@lingui/macro" -import { CSGTheme } from "../../Themes/types" -import { useGamingApi } from "../../Contexts/GamingApiContext" -import { useUser } from "../../Contexts/UserContext" - -const useStyles = makeStyles( - ({ palette, animation, breakpoints, constants, zIndex }: CSGTheme) => { - return createStyles({ - root: { - position: "fixed", - display: "flex", - flexDirection: "row", - top: 0, - transitionDuration: `${animation.translate}ms`, - visibility: "hidden", - [breakpoints.up("md")]: { - width: `calc(100% - ${constants.navWidth}px)`, - padding: `${0}px ${constants.contentPadding}px ${0}px ${ - constants.contentPadding - }px`, - left: Number(constants.navWidth), - opacity: 0, - - backgroundColor: constants.header.rootBackground, - - "& > *:first-child": { - flex: "1 1 0" - }, - "&.active": { - opacity: 1, - height: "auto", - visibility: "visible", - padding: `${constants.headerTopPadding}px ${ - constants.contentPadding - }px ${0}px ${constants.contentPadding}px`, - zIndex: zIndex?.layer1 - } - }, - [breakpoints.down("md")]: { - left: 0, - width: "100%", - justifyContent: "space-between", - alignItems: "center", - position: "fixed", - backgroundColor: palette.additional["gray"][3], - "&.active": { - opacity: 1, - visibility: "visible", - height: Number(constants.mobileHeaderHeight), - zIndex: Number(zIndex?.layer1) - } - } - }, - hamburgerMenu: { - position: "absolute", - "& span": { - backgroundColor: constants.header.hamburger - } - }, - logo: { - textDecoration: "none", - display: "flex", - flexDirection: "row", - alignItems: "center", - [breakpoints.up("md")]: { - "& img": { - height: constants.generalUnit * 5, - width: "auto" - } - }, - [breakpoints.down("md")]: { - position: "absolute", - left: "50%", - top: "50%", - transform: "translate(-50%,-50%)", - "& img": { - height: constants.generalUnit * 3.25, - width: "auto" - } - } - }, - accountControls: { - display: "flex", - justifyContent: "flex-end", - alignItems: "center", - flexDirection: "row", - [breakpoints.up("md")]: { - marginLeft: constants.accountControlsPadding - }, - "& > *:first-child": { - marginRight: constants.generalUnit * 2 - } - }, - searchModule: { - [breakpoints.down("md")]: { - height: constants.mobileHeaderHeight, - position: "absolute", - width: "100%", - zIndex: zIndex?.background, - "&.active": {} - } - }, - options: { - backgroundColor: constants.header.optionsBackground, - color: constants.header.optionsTextColor, - border: `1px solid ${constants.header.optionsBorder}`, - minWidth: 145 - }, - menuItem: { - width: "100%", - display: "flex", - flexDirection: "row", - alignItems: "center", - color: constants.header.menuItemTextColor, - "& svg": { - width: constants.generalUnit * 2, - height: constants.generalUnit * 2, - marginRight: constants.generalUnit, - fill: palette.additional["gray"][7], - stroke: palette.additional["gray"][7] - } - }, - icon: { - "& svg": { - fill: constants.header.iconColor - } - }, - title : { - marginLeft: constants.generalUnit - } - }) - } -) - -interface IAppHeader { - navOpen: boolean - setNavOpen: (state: boolean) => void -} - -const AppHeader = ({ navOpen, setNavOpen }: IAppHeader) => { - const { desktop } = useThemeSwitcher() - const classes = useStyles() - const { isLoggedIn, logout } = useGamingApi() - const { history } = useHistory() - const { getProfileTitle } = useUser() - - const signOut = useCallback(async () => { - logout() - history.replace("/", {}) - }, [logout, history]) - - return ( -
- {isLoggedIn && ( - <> - {desktop ? ( - <> -
- signOut(), - contents: ( -
- - - Sign Out - -
- ) - } - ]} - /> -
- - ) : ( - <> - setNavOpen(!navOpen)} - variant={navOpen ? "active" : "default"} - className={clsx(classes.hamburgerMenu, "hamburger-menu")} - testId="hamburger-menu" - /> - - - - Dashboard - - - - )} - - )} -
- ) -} - -export default AppHeader diff --git a/packages/gaming-ui/src/Components/Layouts/AppNav.tsx b/packages/gaming-ui/src/Components/Layouts/AppNav.tsx deleted file mode 100644 index 7746860bf1..0000000000 --- a/packages/gaming-ui/src/Components/Layouts/AppNav.tsx +++ /dev/null @@ -1,272 +0,0 @@ -import { - createStyles, - makeStyles, - useThemeSwitcher -} from "@chainsafe/common-theme" -import React, { useCallback } from "react" -import clsx from "clsx" -import { - Link, - Typography, - PowerDownSvg, - ChainsafeLogo -} from "@chainsafe/common-components" -import { ROUTE_LINKS } from "../GamingRoutes" -import { Trans } from "@lingui/macro" -import { CSGTheme } from "../../Themes/types" -import { useGamingApi } from "../../Contexts/GamingApiContext" - -const useStyles = makeStyles( - ({ palette, animation, breakpoints, constants, zIndex }: CSGTheme) => { - return createStyles({ - root: { - width: 0, - overflow: "hidden", - transitionDuration: `${animation.translate}ms`, - display: "flex", - flexDirection: "column", - position: "fixed", - left: 0, - opacity: 0, - "&.active": { - opacity: 1 - }, - [breakpoints.up("md")]: { - padding: `${constants.topPadding}px ${ - constants.generalUnit * 4.5 - }px`, - top: 0, - height: "100%", - backgroundColor: constants.nav.backgroundColor, - "&.active": { - width: `${constants.navWidth}px` - } - }, - [breakpoints.down("md")]: { - height: `calc(100% - ${constants.mobileHeaderHeight}px)`, - top: `${constants.mobileHeaderHeight}px`, - backgroundColor: constants.nav.mobileBackgroundColor, - zIndex: zIndex?.layer1, - padding: `0 ${constants.generalUnit * 4}px`, - maxWidth: "100vw", - visibility: "hidden", - "&.active": { - visibility: "visible", - width: `${constants.mobileNavWidth}px` - } - } - }, - blocker: { - display: "block", - backgroundColor: constants.nav.blocker, - position: "fixed", - top: Number(constants.mobileHeaderHeight), - left: 0, - height: `calc(100% - ${constants.mobileHeaderHeight}px)`, - width: "100%", - transitionDuration: `${animation.translate}ms`, - zIndex: zIndex?.background, - opacity: 0, - visibility: "hidden", - "&.active": { - visibility: "visible", - [breakpoints.down("md")]: { - opacity: 0.5 - } - } - }, - logo: { - textDecoration: "none", - display: "flex", - flexDirection: "row", - alignItems: "center", - - [breakpoints.up("md")]: { - "& img": { - height: constants.generalUnit * 5, - width: "auto" - }, - "& > *:first-child": { - marginRight: constants.generalUnit - } - }, - [breakpoints.down("md")]: { - position: "absolute", - left: "50%", - top: "50%", - transform: "translate(-50%,-50%)", - "& img": { - height: constants.generalUnit * 3.25, - width: "auto" - } - } - }, - navMenu: { - display: "flex", - flexDirection: "column", - marginBottom: constants.generalUnit * 8.5, - transitionDuration: `${animation.translate}ms` - }, - linksArea: { - display: "flex", - flexDirection: "column", - flex: "1 1 0", - justifyContent: "center", - transitionDuration: `${animation.translate}ms`, - "& > span": { - marginBottom: constants.generalUnit * 2 - }, - [breakpoints.up("md")]: { - height: 0 - }, - [breakpoints.down("md")]: { - transitionDuration: `${animation.translate}ms`, - color: palette.additional["gray"][3], - "&.active": {} - } - }, - navItem: { - textDecoration: "none", - display: "flex", - flexDirection: "row", - alignItems: "center", - cursor: "pointer", - padding: `${constants.generalUnit * 1.5}px 0`, - transitionDuration: `${animation.transform}ms`, - "& span": { - transitionDuration: `${animation.transform}ms`, - [breakpoints.up("md")]: { - color: constants.nav.itemColor - }, - [breakpoints.down("md")]: { - color: constants.nav.itemColorHover - } - }, - "& svg": { - transitionDuration: `${animation.transform}ms`, - width: Number(constants.svgWidth), - marginRight: constants.generalUnit * 2, - [breakpoints.up("md")]: { - fill: constants.nav.itemIconColor - }, - [breakpoints.down("md")]: { - fill: constants.nav.itemIconColorHover - } - }, - "&:hover": { - "& span": { - color: constants.nav.itemColorHover - }, - "& svg": { - fill: constants.nav.itemIconColorHover - } - }, - [breakpoints.down("md")]: { - minWidth: Number(constants.mobileNavWidth) - } - }, - navItemText: { - [breakpoints.down("md")]: { - color: palette.additional["gray"][3] - } - }, - menuItem: { - width: 100, - display: "flex", - flexDirection: "row", - alignItems: "center", - "& svg": { - width: constants.generalUnit * 2, - height: constants.generalUnit * 2, - marginRight: constants.generalUnit - } - }, - spaceUsedMargin: { - marginBottom: constants.generalUnit - }, - betaCaption: { - marginBottom: constants.generalUnit * 0.5 - } - }) - } -) - -interface IAppNav { - navOpen: boolean - setNavOpen: (state: boolean) => void -} - -const AppNav: React.FC = ({ navOpen, setNavOpen }: IAppNav) => { - const { desktop } = useThemeSwitcher() - const classes = useStyles() - - const { isLoggedIn, logout } = useGamingApi() - - const signOut = useCallback(() => { - logout() - }, [logout]) - - const handleOnClick = useCallback(() => { - if (!desktop && navOpen) { - setNavOpen(false) - } - }, [desktop, navOpen, setNavOpen]) - - return ( -
- {isLoggedIn && ( - <> - {desktop && ( -
- - - - Gaming - - -
- )} -
- -
-
- {!desktop && ( -
{ - handleOnClick() - signOut() - }} - > - - - Sign Out - -
- )} -
- {!desktop && ( -
setNavOpen(false)} - className={clsx(classes.blocker, { - active: navOpen - })} - >
- )} - - )} -
- ) -} - -export default AppNav \ No newline at end of file diff --git a/packages/gaming-ui/src/Components/Layouts/AppWrapper.tsx b/packages/gaming-ui/src/Components/Layouts/AppWrapper.tsx deleted file mode 100644 index e09654b091..0000000000 --- a/packages/gaming-ui/src/Components/Layouts/AppWrapper.tsx +++ /dev/null @@ -1,90 +0,0 @@ -import { createStyles, ITheme, makeStyles } from "@chainsafe/common-theme" -import React, { useState } from "react" -import { ReactNode } from "react" -import clsx from "clsx" -import { useGamingApi } from "../../Contexts/GamingApiContext" -import { CssBaseline } from "@chainsafe/common-components" -import AppHeader from "./AppHeader" -import AppNav from "./AppNav" - -interface IAppWrapper { - children: ReactNode | ReactNode[] -} - -const useStyles = makeStyles( - ({ animation, breakpoints, constants }: ITheme) => { - return createStyles({ - root: { - minHeight: "100vh" - }, - bodyWrapper: { - transitionDuration: `${animation.translate}ms`, - [breakpoints.up("md")]: { - padding: "0", - "&.active": { - // This moves the content areas based on the size of the nav bar - - padding: `${0}px ${constants.contentPadding}px ${0}px ${ - Number(constants.navWidth) + - Number(constants.contentPadding) - }px` - } - }, - [breakpoints.down("md")]: {} - }, - content: { - minHeight: "100vh", - [breakpoints.up("md")]: { - height: "100%", - transitionDuration: `${animation.translate}ms`, - padding: 0, - "&.active": { - height: "initial", - padding: `${constants.contentTopPadding}px 0 0` - } - }, - [breakpoints.down("md")]: { - "&.active": { - height: "initial", - padding: `${constants.mobileHeaderHeight}px 0 0` - } - } - } - }) - } -) - -const AppWrapper: React.FC = ({ children }: IAppWrapper) => { - const classes = useStyles() - const [navOpen, setNavOpen] = useState(false) - const { isLoggedIn } = useGamingApi() - - return ( -
- - -
- -
- {children} -
-
-
- ) -} - -export default AppWrapper diff --git a/packages/gaming-ui/src/Components/Modules/DashboardModule.tsx b/packages/gaming-ui/src/Components/Modules/DashboardModule.tsx deleted file mode 100644 index 7d75feb1b8..0000000000 --- a/packages/gaming-ui/src/Components/Modules/DashboardModule.tsx +++ /dev/null @@ -1,263 +0,0 @@ -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 createGamingAccessKey = useCallback(() => { - gamingApiClient.createAccessKey({ type: "gaming" }) - .then((key) => { - setNewKey(key) - fetchAccessKeys() - 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/Modules/LoginModule.tsx b/packages/gaming-ui/src/Components/Modules/LoginModule.tsx deleted file mode 100644 index c4268a24c0..0000000000 --- a/packages/gaming-ui/src/Components/Modules/LoginModule.tsx +++ /dev/null @@ -1,435 +0,0 @@ -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 "./LoginModule/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 * 20}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: any) { - let errorMessage = t`There was an error authenticating` - - // Invalid signature, or contract wallet not deployed - if (error?.error?.code === 403 && error?.error?.message?.includes("Invalid signature")) { - errorMessage = t`Failed to validate signature. - If you are using a contract wallet, please make - sure you have activated your wallet.` - } - - // User rejected the signature request (WalletConnect be sassy) - if (error?.message === "Just nope" || error?.code === 4001) { - errorMessage = t`Failed to get signature` - } - - // DirectAuth popup was closed - 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 ( - <> -
- - -
-