From ecfa362e58101963f93ecca760588c0e3c86f2f3 Mon Sep 17 00:00:00 2001 From: victoriari Date: Fri, 17 May 2024 16:09:28 +0300 Subject: [PATCH 01/22] Moved new components to existing client dir --- .gitignore | 9 + client/.prettierrc | 2 +- client/package.json | 5 +- client/public/index.html | 2 +- client/public/prism.css | 98 -------- client/public/styles.css | 50 ++++ client/src/App.tsx | 42 +--- client/src/account-menu.jpg | Bin 32666 -> 0 bytes client/src/app/components/badge/badge.tsx | 52 +++++ .../app/components/click-top-bar/index.tsx | 28 +++ .../settings/account-menu-item.tsx | 23 ++ .../click-top-bar/settings/account-menu.tsx | 11 + .../click-top-bar/settings/index.ts | 1 + client/src/app/components/icon/icon.tsx | 66 ++++++ .../app/components/modal/modal-content.tsx | 218 ++++++++++++++++++ client/src/app/components/modal/modal.tsx | 65 ++++++ .../components/navigation-menu/menu-link.tsx | 29 +++ .../navigation-menu/navigation-menu.tsx | 42 ++++ .../navigation-menu/router-link.tsx | 34 +++ .../components/page-header/page-header.tsx | 86 +++++++ .../components/page-layout/page-layout.tsx | 45 ++++ client/src/app/router/index.tsx | 37 +++ client/src/app/router/paths.ts | 4 + client/src/app/scenes/about/index.tsx | 141 +++++++++++ client/src/app/scenes/home/JackpotInfo.tsx | 123 ++++++++++ client/src/app/scenes/home/NoPlays.tsx | 59 +++++ client/src/app/scenes/home/Plays.tsx | 32 +++ client/src/app/scenes/home/index.tsx | 25 ++ client/src/{ => app}/theme/index.tsx | 0 client/src/{ => app/utils}/casper-helper.ts | 0 client/src/assets/icons/connection.svg | 5 + client/src/assets/icons/cup.svg | 11 + client/src/assets/icons/hamburger-menu.svg | 3 + client/src/assets/icons/hand.svg | 10 + client/src/assets/icons/happy.svg | 5 + client/src/assets/icons/loading.svg | 16 ++ client/src/assets/icons/sad.svg | 12 + client/src/assets/icons/ticket.svg | 5 + .../{images => assets}/icons/two-coins.svg | 0 .../src/assets/images/cspr-click-scheme.png | Bin 0 -> 231580 bytes client/src/assets/images/jackpot.svg | 44 ++++ client/src/assets/images/shine.png | Bin 0 -> 450835 bytes .../logos/lottery-logo.svg} | 4 +- client/src/components/App/components/Nav.tsx | 74 ------ .../components/App/components/about/About.tsx | 108 --------- .../components/App/components/home/Home.tsx | 33 --- .../App/components/home/Landing.tsx | 47 ---- .../components/App/components/home/Modal.tsx | 163 ------------- .../App/components/home/ModalContent.tsx | 187 --------------- .../App/components/home/NoPlays.tsx | 49 ---- .../App/components/home/PlaysContext.tsx | 52 ----- .../App/components/home/PlaysTable.tsx | 45 ---- .../App/components/home/Welcome.tsx | 189 --------------- .../components/home/table/PlaysTableData.tsx | 87 ------- .../home/table/PlaysTableHeader.tsx | 35 --- .../components/home/table/StyledIdenticon.tsx | 6 - .../App/components/home/table/table-row.tsx | 44 ---- .../App/components/home/table/types.ts | 13 -- client/src/components/ClickTopBar/index.tsx | 48 ---- .../ClickTopBar/settings/account-menu.tsx | 16 -- .../components/ClickTopBar/settings/index.ts | 1 - client/src/components/WebSocketProvider.tsx | 74 ------ client/src/components/container.tsx | 64 ----- client/src/globalStyles/index.tsx | 21 -- client/src/images/about/whitepaper-visual.png | Bin 131772 -> 0 bytes client/src/images/desktop-bg.svg | 21 -- .../src/images/icons/account-menu-trophy.svg | 11 - client/src/images/icons/disconnected-plug.svg | 3 - client/src/images/icons/happy.svg | 3 - client/src/images/icons/jackpot-trophy.svg | 4 - client/src/images/icons/sad.svg | 10 - client/src/images/icons/ticket.svg | 3 - client/src/images/icons/trophy-bold.svg | 4 - client/src/images/icons/welcome-hand.svg | 10 - client/src/images/jackpot-flare.svg | 9 - client/src/images/jackpot-text.svg | 44 ---- client/src/images/loading.svg | 18 -- client/src/images/x-button.svg | 4 - client/src/logo.svg | 4 - client/src/play.interface.ts | 10 - client/src/react-app-env.d.ts | 1 - client/{ => src}/types/globals.d.ts | 0 client/types/react-identicons.d.ts | 18 -- 83 files changed, 1310 insertions(+), 1667 deletions(-) delete mode 100644 client/public/prism.css create mode 100644 client/public/styles.css delete mode 100644 client/src/account-menu.jpg create mode 100644 client/src/app/components/badge/badge.tsx create mode 100644 client/src/app/components/click-top-bar/index.tsx create mode 100644 client/src/app/components/click-top-bar/settings/account-menu-item.tsx create mode 100644 client/src/app/components/click-top-bar/settings/account-menu.tsx create mode 100644 client/src/app/components/click-top-bar/settings/index.ts create mode 100644 client/src/app/components/icon/icon.tsx create mode 100644 client/src/app/components/modal/modal-content.tsx create mode 100644 client/src/app/components/modal/modal.tsx create mode 100644 client/src/app/components/navigation-menu/menu-link.tsx create mode 100644 client/src/app/components/navigation-menu/navigation-menu.tsx create mode 100644 client/src/app/components/navigation-menu/router-link.tsx create mode 100644 client/src/app/components/page-header/page-header.tsx create mode 100644 client/src/app/components/page-layout/page-layout.tsx create mode 100644 client/src/app/router/index.tsx create mode 100644 client/src/app/router/paths.ts create mode 100644 client/src/app/scenes/about/index.tsx create mode 100644 client/src/app/scenes/home/JackpotInfo.tsx create mode 100644 client/src/app/scenes/home/NoPlays.tsx create mode 100644 client/src/app/scenes/home/Plays.tsx create mode 100644 client/src/app/scenes/home/index.tsx rename client/src/{ => app}/theme/index.tsx (100%) rename client/src/{ => app/utils}/casper-helper.ts (100%) create mode 100644 client/src/assets/icons/connection.svg create mode 100644 client/src/assets/icons/cup.svg create mode 100644 client/src/assets/icons/hamburger-menu.svg create mode 100644 client/src/assets/icons/hand.svg create mode 100644 client/src/assets/icons/happy.svg create mode 100644 client/src/assets/icons/loading.svg create mode 100644 client/src/assets/icons/sad.svg create mode 100644 client/src/assets/icons/ticket.svg rename client/src/{images => assets}/icons/two-coins.svg (100%) create mode 100644 client/src/assets/images/cspr-click-scheme.png create mode 100644 client/src/assets/images/jackpot.svg create mode 100644 client/src/assets/images/shine.png rename client/src/{images/logo.svg => assets/logos/lottery-logo.svg} (99%) delete mode 100644 client/src/components/App/components/Nav.tsx delete mode 100644 client/src/components/App/components/about/About.tsx delete mode 100644 client/src/components/App/components/home/Home.tsx delete mode 100644 client/src/components/App/components/home/Landing.tsx delete mode 100644 client/src/components/App/components/home/Modal.tsx delete mode 100644 client/src/components/App/components/home/ModalContent.tsx delete mode 100644 client/src/components/App/components/home/NoPlays.tsx delete mode 100644 client/src/components/App/components/home/PlaysContext.tsx delete mode 100644 client/src/components/App/components/home/PlaysTable.tsx delete mode 100644 client/src/components/App/components/home/Welcome.tsx delete mode 100644 client/src/components/App/components/home/table/PlaysTableData.tsx delete mode 100644 client/src/components/App/components/home/table/PlaysTableHeader.tsx delete mode 100644 client/src/components/App/components/home/table/StyledIdenticon.tsx delete mode 100644 client/src/components/App/components/home/table/table-row.tsx delete mode 100644 client/src/components/App/components/home/table/types.ts delete mode 100644 client/src/components/ClickTopBar/index.tsx delete mode 100644 client/src/components/ClickTopBar/settings/account-menu.tsx delete mode 100644 client/src/components/ClickTopBar/settings/index.ts delete mode 100644 client/src/components/WebSocketProvider.tsx delete mode 100644 client/src/components/container.tsx delete mode 100644 client/src/globalStyles/index.tsx delete mode 100644 client/src/images/about/whitepaper-visual.png delete mode 100644 client/src/images/desktop-bg.svg delete mode 100644 client/src/images/icons/account-menu-trophy.svg delete mode 100644 client/src/images/icons/disconnected-plug.svg delete mode 100644 client/src/images/icons/happy.svg delete mode 100644 client/src/images/icons/jackpot-trophy.svg delete mode 100644 client/src/images/icons/sad.svg delete mode 100644 client/src/images/icons/ticket.svg delete mode 100644 client/src/images/icons/trophy-bold.svg delete mode 100644 client/src/images/icons/welcome-hand.svg delete mode 100644 client/src/images/jackpot-flare.svg delete mode 100644 client/src/images/jackpot-text.svg delete mode 100644 client/src/images/loading.svg delete mode 100644 client/src/images/x-button.svg delete mode 100644 client/src/logo.svg delete mode 100644 client/src/play.interface.ts delete mode 100644 client/src/react-app-env.d.ts rename client/{ => src}/types/globals.d.ts (100%) delete mode 100644 client/types/react-identicons.d.ts diff --git a/.gitignore b/.gitignore index 9c97bbd..eb01c17 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,12 @@ node_modules dist .env + +# IDEs and editors +.idea +.project +.classpath +.c9/ +*.launch +.settings/ +*.sublime-workspace \ No newline at end of file diff --git a/client/.prettierrc b/client/.prettierrc index dce8242..ec49995 100644 --- a/client/.prettierrc +++ b/client/.prettierrc @@ -1,7 +1,7 @@ { "singleQuote": true, "bracketSpacing": true, - "printWidth": 120, + "printWidth": 70, "tabWidth": 2, "jsxSingleQuote": true, "arrowParens": "avoid", diff --git a/client/package.json b/client/package.json index 184154b..4d2d551 100644 --- a/client/package.json +++ b/client/package.json @@ -3,13 +3,16 @@ "version": "0.1.0", "private": true, "dependencies": { + "@make-software/cspr-ui": "github:make-software/cspr-ui-library#31a8ba772c81fa113bcebe35c37e3dce749f5ce9", + "@make-software/csprclick-core-client": "^1.3.0", + "@make-software/csprclick-core-types": "^1.3.0", "@make-software/csprclick-ui": "^1.3.0", "@metamask/safe-event-emitter": "^2.0.0", "axios": "^1.6.8", "casper-js-sdk": "^2.15.4", "prismjs": "^1.29.0", "react-identicons": "^1.2.5", - "react-router-dom": "^6.22.3", + "react-router-dom": "^6.23.1", "typedjson": "^1.8.0" }, "scripts": { diff --git a/client/public/index.html b/client/public/index.html index e6700ad..59de828 100644 --- a/client/public/index.html +++ b/client/public/index.html @@ -43,7 +43,7 @@ Casper Lottery Demo - + diff --git a/client/public/prism.css b/client/public/prism.css deleted file mode 100644 index 0b79c19..0000000 --- a/client/public/prism.css +++ /dev/null @@ -1,98 +0,0 @@ -/* PrismJS 1.29.0 -https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+clike+javascript+jsx+tsx+typescript */ -code[class*='language-'], -pre[class*='language-'] { - color: #ccc; - background: 0 0; - font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; - font-size: 1em; - text-align: left; - white-space: pre; - word-spacing: normal; - word-break: normal; - word-wrap: normal; - line-height: 1.5; - -moz-tab-size: 4; - -o-tab-size: 4; - tab-size: 4; - -webkit-hyphens: none; - -moz-hyphens: none; - -ms-hyphens: none; - hyphens: none; -} -pre[class*='language-'] { - padding: 1em; - margin: 0.5em 0; - overflow: auto; -} -:not(pre) > code[class*='language-'], -pre[class*='language-'] { - background: #2d2d2d; -} -:not(pre) > code[class*='language-'] { - padding: 0.1em; - border-radius: 0.3em; - white-space: normal; -} -.token.block-comment, -.token.cdata, -.token.comment, -.token.doctype, -.token.prolog { - color: #999; -} -.token.punctuation { - color: #ccc; -} -.token.attr-name, -.token.deleted, -.token.namespace, -.token.tag { - color: #e2777a; -} -.token.function-name { - color: #6196cc; -} -.token.boolean, -.token.function, -.token.number { - color: #f08d49; -} -.token.class-name, -.token.constant, -.token.property, -.token.symbol { - color: #f8c555; -} -.token.atrule, -.token.builtin, -.token.important, -.token.keyword, -.token.selector { - color: #cc99cd; -} -.token.attr-value, -.token.char, -.token.regex, -.token.string, -.token.variable { - color: #7ec699; -} -.token.entity, -.token.operator, -.token.url { - color: #67cdcc; -} -.token.bold, -.token.important { - font-weight: 700; -} -.token.italic { - font-style: italic; -} -.token.entity { - cursor: help; -} -.token.inserted { - color: green; -} diff --git a/client/public/styles.css b/client/public/styles.css new file mode 100644 index 0000000..5a58594 --- /dev/null +++ b/client/public/styles.css @@ -0,0 +1,50 @@ +html { + font-family: 'Inter', sans-serif; + box-sizing: border-box; + overflow-y: visible; +} + +*, +*:before, +*:after { + box-sizing: inherit; +} + +@supports (font-variation-settings: normal) { + html { + font-family: 'Inter var', sans-serif; + } +} + +body { + font-weight: normal; + color: #1a1919; + margin: unset; + background: #f2f3f5; +} + +b { + font-weight: 700; +} + +button, +a { + cursor: pointer; + text-decoration: none; +} + +a:focus, +button:focus, +input:focus, +textarea:focus { + outline: none; +} + +@keyframes spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} diff --git a/client/src/App.tsx b/client/src/App.tsx index 87d1522..9549129 100644 --- a/client/src/App.tsx +++ b/client/src/App.tsx @@ -1,28 +1,22 @@ -import { useEffect, useState, createContext } from 'react'; +import { useEffect, useState } from 'react'; import { ThemeProvider } from 'styled-components'; -import { useClickRef, ThemeModeType } from '@make-software/csprclick-ui'; -import ClickTopBar from './components/ClickTopBar'; -import { AppTheme } from './theme'; -import Nav from './components/App/components/Nav'; -import Container from './components/container'; -import Home from './components/App/components/home/Home'; -import { Route, Routes } from 'react-router-dom'; -import About from './components/App/components/about/About'; -import { WebSocketProvider } from './components/WebSocketProvider'; - -export const ActiveAccountContext = createContext(null); +import { + useClickRef, + ThemeModeType, +} from '@make-software/csprclick-ui'; +import { AppTheme } from './app/theme'; +import Router from './app/router'; const App = () => { const clickRef = useClickRef(); - const [themeMode, setThemeMode] = useState(ThemeModeType.light); const [activeAccount, setActiveAccount] = useState(null); useEffect(() => { clickRef?.on('csprclick:signed_in', async (evt: any) => { - setActiveAccount(evt.account); + await setActiveAccount(evt.account); }); clickRef?.on('csprclick:switched_account', async (evt: any) => { - setActiveAccount(evt.account); + await setActiveAccount(evt.account); }); clickRef?.on('csprclick:signed_out', async (evt: any) => { setActiveAccount(null); @@ -33,22 +27,8 @@ const App = () => { }, [clickRef?.on]); return ( - - setThemeMode(themeMode === ThemeModeType.light ? ThemeModeType.dark : ThemeModeType.light)} - /> - - -