From ab462f5980e12282f1d34b4ccd92af22331b0aab Mon Sep 17 00:00:00 2001 From: NotEternal Date: Wed, 31 Mar 2021 02:23:48 -0800 Subject: [PATCH 01/16] Add a SplashScreen page --- src/front/shared/helpers/links.ts | 1 + .../pages/SplashScreen/images/exchange.svg | 31 +++++++ .../shared/pages/SplashScreen/images/index.ts | 9 ++ .../pages/SplashScreen/images/wallet.svg | 31 +++++++ .../shared/pages/SplashScreen/index.scss | 0 src/front/shared/pages/SplashScreen/index.tsx | 93 +++++++++++++++++++ src/front/shared/routes/index.tsx | 2 + tsconfig.json | 2 + 8 files changed, 169 insertions(+) create mode 100644 src/front/shared/pages/SplashScreen/images/exchange.svg create mode 100644 src/front/shared/pages/SplashScreen/images/index.ts create mode 100644 src/front/shared/pages/SplashScreen/images/wallet.svg create mode 100644 src/front/shared/pages/SplashScreen/index.scss create mode 100644 src/front/shared/pages/SplashScreen/index.tsx diff --git a/src/front/shared/helpers/links.ts b/src/front/shared/helpers/links.ts index 390630eecd..153d414505 100644 --- a/src/front/shared/helpers/links.ts +++ b/src/front/shared/helpers/links.ts @@ -11,6 +11,7 @@ const linksManager = { connectWallet: '/connectWallet', invoices: '/invoices', invoice: '/invoice', + splashScreen: '/splashScreen', farm: '/farm', localStorage: '/localStorage', diff --git a/src/front/shared/pages/SplashScreen/images/exchange.svg b/src/front/shared/pages/SplashScreen/images/exchange.svg new file mode 100644 index 0000000000..b6784ced75 --- /dev/null +++ b/src/front/shared/pages/SplashScreen/images/exchange.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/front/shared/pages/SplashScreen/images/index.ts b/src/front/shared/pages/SplashScreen/images/index.ts new file mode 100644 index 0000000000..ae79951ea8 --- /dev/null +++ b/src/front/shared/pages/SplashScreen/images/index.ts @@ -0,0 +1,9 @@ +import wallet from './wallet.svg' +import exchange from './exchange.svg' + +const screenIcons = { + WALLET: wallet, + EXCHANGE: exchange, +} + +export default screenIcons \ No newline at end of file diff --git a/src/front/shared/pages/SplashScreen/images/wallet.svg b/src/front/shared/pages/SplashScreen/images/wallet.svg new file mode 100644 index 0000000000..6acb55ee63 --- /dev/null +++ b/src/front/shared/pages/SplashScreen/images/wallet.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/front/shared/pages/SplashScreen/index.scss b/src/front/shared/pages/SplashScreen/index.scss new file mode 100644 index 0000000000..e69de29bb2 diff --git a/src/front/shared/pages/SplashScreen/index.tsx b/src/front/shared/pages/SplashScreen/index.tsx new file mode 100644 index 0000000000..fb102cc09f --- /dev/null +++ b/src/front/shared/pages/SplashScreen/index.tsx @@ -0,0 +1,93 @@ +import React from 'react' +import CSSModules from 'react-css-modules' +import styles from './index.scss' +import { constants } from 'helpers' +import { FormattedMessage } from 'react-intl' +import web3Icons from 'images/' +import links from 'helpers/links' +import screenIcons from './images' + +const isDark = localStorage.getItem(constants.localStorage.isDark) + +const SplashScreen = (props) => { + const { history } = props + + const handlerCreateBtn = () => { + history.push(links.createWallet) + } + + const handlerConnectBtn = () => { + history.push(links.connectWallet) + } + + const handlerRestoreBtn = () => { + history.push(links.restoreWallet) + } + + const handlerSkipBtn = () => { + history.push(links.exchange) + } + + return ( +
+

+ +

+ +
+
+ +

+ +

+
+ +
+ + +
+
+ +
+
+ + + +
+ + + + +
+
+ ) +} + +export default CSSModules(SplashScreen, styles, { allowMultiple: true }) \ No newline at end of file diff --git a/src/front/shared/routes/index.tsx b/src/front/shared/routes/index.tsx index 3954013a98..548d4f0b6c 100644 --- a/src/front/shared/routes/index.tsx +++ b/src/front/shared/routes/index.tsx @@ -5,6 +5,7 @@ import { Switch, Route } from 'react-router-dom' import { links } from 'helpers' import { localisePrefix } from 'helpers/locale' +import SplashScreen from 'pages/SplashScreen' import Farm from 'pages/Farm' import LocalStorage from 'pages/LocalStorage/LocalStorage' import SwapComponent from 'pages/Swap/Swap' @@ -52,6 +53,7 @@ const routes = ( + diff --git a/tsconfig.json b/tsconfig.json index 9bd35e57e6..6259ce4196 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -40,6 +40,8 @@ "app-config": ["src/front/local_modules/app-config"], "plugins/*": ["src/front/shared/plugins/*"], "local_modules/*": ["src/front/local_modules/*"], + "images/": ["src/front/shared/images/"], + "images/*": ["src/front/shared/images/*"], "swap.app": ["src/core/swap.app"], "swap.app/*": ["src/core/swap.app/*"], From e07ac0f02cbc4baca4543d969a928cb6421f1427 Mon Sep 17 00:00:00 2001 From: NotEternal Date: Wed, 31 Mar 2021 04:30:56 -0800 Subject: [PATCH 02/16] Add main styles for the screen. Cleanup index.html (move some functional into SplashScreen) --- src/front/client/index.html | 600 +----------------- .../client/scss/config/vars/_colors.scss | 12 + src/front/shared/containers/App/App.tsx | 178 ++++-- .../shared/pages/SplashScreen/index.scss | 56 ++ src/front/shared/pages/SplashScreen/index.tsx | 93 ++- 5 files changed, 263 insertions(+), 676 deletions(-) diff --git a/src/front/client/index.html b/src/front/client/index.html index f457648bd2..c40d5da97b 100644 --- a/src/front/client/index.html +++ b/src/front/client/index.html @@ -35,45 +35,6 @@ var isWidgetBuild = '<%= htmlWebpackPlugin.options.isWidget %>'; - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Connect Wallet - - -
- -
-
- -
- - - -
@@ -591,6 +131,7 @@

+ - + - - -