From 8bfcd141e6d15389675df657cc6dd233e7e676bb Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Wed, 23 Aug 2023 10:10:52 +0300 Subject: [PATCH] Create onboarding page --- package.json | 1 + src/App.tsx | 2 + .../ValidatorOnboarding.tsx | 42 +++ yarn.lock | 331 +++++++++++++++++- 4 files changed, 370 insertions(+), 6 deletions(-) create mode 100644 src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx diff --git a/package.json b/package.json index fb179ed5..53c43e4b 100644 --- a/package.json +++ b/package.json @@ -33,6 +33,7 @@ "react": "18", "react-color": "^2.19.3", "react-dom": "18", + "react-form-stepper": "^2.0.3", "react-native": "^0.72.3", "react-native-svg": "^13.10.0", "react-redux": "^8.1.2", diff --git a/src/App.tsx b/src/App.tsx index 79aced95..583c03f3 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -12,6 +12,7 @@ import { Provider as ReduxProvider } from 'react-redux' import PinnedNotification from './components/General/PinnedNottification' import store from './redux/store' import CreateLocalNodePage from './pages/CreateLocalNodePage/CreateLocalNodePage' +import ValidatorOnboarding from './pages/ValidatorOnboarding/ValidatorOnboarding' const router = createBrowserRouter([ { @@ -35,6 +36,7 @@ const router = createBrowserRouter([ element: , }, { path: '/create-local-node', element: }, + { path: '/validator-onboarding', element: }, ]) function App() { diff --git a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx new file mode 100644 index 00000000..3115cd82 --- /dev/null +++ b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx @@ -0,0 +1,42 @@ +import { XStack, YStack } from 'tamagui' +import PageWrapperShadow from '../../components/PageWrappers/PageWrapperShadow' +import Title from '../../components/General/Title' +import { NodeIcon } from '@status-im/icons' +import { Button as StatusButton, Text } from '@status-im/components' +import QuickStartBar from '../../components/General/QuickStartBar/QuickStartBar' +import { useNavigate } from 'react-router' +import FormStepper from './Stepper' + +function ValidatorOnboarding() { + const navigate = useNavigate() + + const getStartedHanlder = () => { + navigate('/pair-device') + } + + return ( + <> + + + + Light and performant clients, for all Ethereum validators. + + Nimbus Nodes allows you to take control and ownership of the services + you wish to run in a completely trustless and decentralized manner. + + + + + + } onPress={getStartedHanlder}> + Get Started + + + + + + + ) +} + +export default ValidatorOnboarding diff --git a/yarn.lock b/yarn.lock index 6ad42e19..e6bd4368 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1590,7 +1590,7 @@ __metadata: languageName: node linkType: hard -"@babel/runtime@npm:^7.12.1, @babel/runtime@npm:^7.9.2": +"@babel/runtime@npm:^7.12.1, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.8.3, @babel/runtime@npm:^7.9.2": version: 7.22.10 resolution: "@babel/runtime@npm:7.22.10" dependencies: @@ -1677,6 +1677,22 @@ __metadata: languageName: node linkType: hard +"@emotion/is-prop-valid@npm:^0.7.3": + version: 0.7.3 + resolution: "@emotion/is-prop-valid@npm:0.7.3" + dependencies: + "@emotion/memoize": 0.7.1 + checksum: 76c2cb5043b0a81dd5c1a8d76baa7c273e9cb5d177efaa482406b0e170ca2ce4f9274f299769e5d5489b319ba2fd94dfd85b912752242c23b159098606da68a9 + languageName: node + linkType: hard + +"@emotion/memoize@npm:0.7.1": + version: 0.7.1 + resolution: "@emotion/memoize@npm:0.7.1" + checksum: fec25e74c3a4af920bfdb0f552c16f648c8f4343d51cb073af85fcec1a382ce041a4e082f458a999dc3599e9d768c0dd28e5accd6066169e01364b270b7036cf + languageName: node + linkType: hard + "@emotion/use-insertion-effect-with-fallbacks@npm:^1.0.0": version: 1.0.1 resolution: "@emotion/use-insertion-effect-with-fallbacks@npm:1.0.1" @@ -8588,7 +8604,7 @@ __metadata: languageName: node linkType: hard -"clsx@npm:^1.2.1": +"clsx@npm:^1.1.1, clsx@npm:^1.2.1": version: 1.2.1 resolution: "clsx@npm:1.2.1" checksum: 30befca8019b2eb7dbad38cff6266cf543091dae2825c856a62a8ccf2c3ab9c2907c4d12b288b73101196767f66812365400a227581484a05f968b0307cfaf12 @@ -8609,7 +8625,7 @@ __metadata: languageName: node linkType: hard -"color-convert@npm:^1.9.0": +"color-convert@npm:^1.9.0, color-convert@npm:^1.9.3": version: 1.9.3 resolution: "color-convert@npm:1.9.3" dependencies: @@ -8634,13 +8650,23 @@ __metadata: languageName: node linkType: hard -"color-name@npm:~1.1.4": +"color-name@npm:^1.0.0, color-name@npm:~1.1.4": version: 1.1.4 resolution: "color-name@npm:1.1.4" checksum: b0445859521eb4021cd0fb0cc1a75cecf67fceecae89b63f62b201cca8d345baf8b952c966862a9d9a2632987d4f6581f0ec8d957dfacece86f0a7919316f610 languageName: node linkType: hard +"color-string@npm:^1.6.0": + version: 1.9.1 + resolution: "color-string@npm:1.9.1" + dependencies: + color-name: ^1.0.0 + simple-swizzle: ^0.2.2 + checksum: c13fe7cff7885f603f49105827d621ce87f4571d78ba28ef4a3f1a104304748f620615e6bf065ecd2145d0d9dad83a3553f52bb25ede7239d18e9f81622f1cc5 + languageName: node + linkType: hard + "color-support@npm:^1.1.3": version: 1.1.3 resolution: "color-support@npm:1.1.3" @@ -8650,6 +8676,16 @@ __metadata: languageName: node linkType: hard +"color@npm:^3.2.1": + version: 3.2.1 + resolution: "color@npm:3.2.1" + dependencies: + color-convert: ^1.9.3 + color-string: ^1.6.0 + checksum: f81220e8b774d35865c2561be921f5652117638dcda7ca4029262046e37fc2444ac7bbfdd110cf1fd9c074a4ee5eda8f85944ffbdda26186b602dd9bb05f6400 + languageName: node + linkType: hard + "colorette@npm:^1.0.7": version: 1.4.0 resolution: "colorette@npm:1.4.0" @@ -8922,6 +8958,17 @@ __metadata: languageName: node linkType: hard +"css-jss@npm:10.10.0": + version: 10.10.0 + resolution: "css-jss@npm:10.10.0" + dependencies: + "@babel/runtime": ^7.3.1 + jss: ^10.10.0 + jss-preset-default: ^10.10.0 + checksum: 9b0e0251875f7f40dc3f15ceeae74b752719b7861f7b674974dcae9f47d1231d01ddcb36521d2ac3f8b70e12d5eb09b8b6b84fc808691bdb52bf553fba9c5554 + languageName: node + linkType: hard + "css-mediaquery@npm:^0.1.2": version: 0.1.2 resolution: "css-mediaquery@npm:0.1.2" @@ -8952,6 +8999,16 @@ __metadata: languageName: node linkType: hard +"css-vendor@npm:^2.0.8": + version: 2.0.8 + resolution: "css-vendor@npm:2.0.8" + dependencies: + "@babel/runtime": ^7.8.3 + is-in-browser: ^1.0.2 + checksum: 647cd4ea5e401c65c59376255aa2b708e92bf84fba9ce2b3ff5ecb94bf51d74ac374052b1cf9956ef7419b8ebf07fcea9a7683d2d2459127b2ca747ab5b98745 + languageName: node + linkType: hard + "css-what@npm:^6.1.0": version: 6.1.0 resolution: "css-what@npm:6.1.0" @@ -11165,7 +11222,7 @@ __metadata: languageName: node linkType: hard -"hoist-non-react-statics@npm:^3.3.0, hoist-non-react-statics@npm:^3.3.2": +"hoist-non-react-statics@npm:^3.2.0, hoist-non-react-statics@npm:^3.3.0, hoist-non-react-statics@npm:^3.3.2": version: 3.3.2 resolution: "hoist-non-react-statics@npm:3.3.2" dependencies: @@ -11505,6 +11562,13 @@ __metadata: languageName: node linkType: hard +"is-arrayish@npm:^0.3.1": + version: 0.3.2 + resolution: "is-arrayish@npm:0.3.2" + checksum: 977e64f54d91c8f169b59afcd80ff19227e9f5c791fa28fa2e5bce355cbaf6c2c356711b734656e80c9dd4a854dd7efcf7894402f1031dfc5de5d620775b4d5f + languageName: node + linkType: hard + "is-bigint@npm:^1.0.1": version: 1.0.4 resolution: "is-bigint@npm:1.0.4" @@ -11643,6 +11707,13 @@ __metadata: languageName: node linkType: hard +"is-in-browser@npm:^1.0.2, is-in-browser@npm:^1.1.3": + version: 1.1.3 + resolution: "is-in-browser@npm:1.1.3" + checksum: 178491f97f6663c0574565701b76f41633dbe065e4bd8d518ce017a8fa25e5109ecb6a3bd8bd55c0aba11b208f86b9f0f9c91f3664e148ebf618b74a74fcaf09 + languageName: node + linkType: hard + "is-interactive@npm:^1.0.0": version: 1.0.0 resolution: "is-interactive@npm:1.0.0" @@ -12865,6 +12936,168 @@ __metadata: languageName: node linkType: hard +"jss-plugin-camel-case@npm:10.10.0": + version: 10.10.0 + resolution: "jss-plugin-camel-case@npm:10.10.0" + dependencies: + "@babel/runtime": ^7.3.1 + hyphenate-style-name: ^1.0.3 + jss: 10.10.0 + checksum: 693485b86f7a0e0bd0c16b8ddd057ca02a993fc088558c96501f9131e7e6261cc9f4b08047879a68441c688c40dceeb5219b1f15ade9043935aade4f37f5ca85 + languageName: node + linkType: hard + +"jss-plugin-compose@npm:10.10.0": + version: 10.10.0 + resolution: "jss-plugin-compose@npm:10.10.0" + dependencies: + "@babel/runtime": ^7.3.1 + jss: 10.10.0 + tiny-warning: ^1.0.2 + checksum: 4d9c7adf34d3dcbc7b321c980b21b396fe9b97d93d3622e242f4e267ac278753cc7575a003f545138e211fd3302a66e9b75926b4f8e3e7cd7ba21b402a4b5f17 + languageName: node + linkType: hard + +"jss-plugin-default-unit@npm:10.10.0": + version: 10.10.0 + resolution: "jss-plugin-default-unit@npm:10.10.0" + dependencies: + "@babel/runtime": ^7.3.1 + jss: 10.10.0 + checksum: 6e56213830753ad80bca3824973a667106defaef698d5996d45d03a0e2a3e035b33cd257aa8015040c41bd6669e7598dce72c36099d7ae69db758a7b2ca453fa + languageName: node + linkType: hard + +"jss-plugin-expand@npm:10.10.0": + version: 10.10.0 + resolution: "jss-plugin-expand@npm:10.10.0" + dependencies: + "@babel/runtime": ^7.3.1 + jss: 10.10.0 + checksum: 264f198c472b5ef2e11e8897546edcf65f017352426990773f781eaf9921faae132e9611991e5b761ee9a083475e948efd4b6e28a01e25880c2b55c7a044cb9a + languageName: node + linkType: hard + +"jss-plugin-extend@npm:10.10.0": + version: 10.10.0 + resolution: "jss-plugin-extend@npm:10.10.0" + dependencies: + "@babel/runtime": ^7.3.1 + jss: 10.10.0 + tiny-warning: ^1.0.2 + checksum: e163ac6e5f91c6cfc0eda2388b7f3cd8a38d1651fce6ea69a6b8bbaf26266f22a3bdfbe4e56100f12beb98a5f93aaa4dbcfc399ffaf906424cab0fdace645b6b + languageName: node + linkType: hard + +"jss-plugin-global@npm:10.10.0": + version: 10.10.0 + resolution: "jss-plugin-global@npm:10.10.0" + dependencies: + "@babel/runtime": ^7.3.1 + jss: 10.10.0 + checksum: f3af4f40358e96cf89e0c7c84b6e441dc9b4d543cd6109fdf9314a9818fd780d252035f46cc526c3d3fb4393bc29effc6993cc22e04f4e67ec3c889ab760d580 + languageName: node + linkType: hard + +"jss-plugin-nested@npm:10.10.0": + version: 10.10.0 + resolution: "jss-plugin-nested@npm:10.10.0" + dependencies: + "@babel/runtime": ^7.3.1 + jss: 10.10.0 + tiny-warning: ^1.0.2 + checksum: 190094375972b68eb8f683387c74e97dc8347e7cc4f2fbfd40b3baf077dfde83d70e57be56744690d22537c0390e0a398714d86736df820c64e498df95f937de + languageName: node + linkType: hard + +"jss-plugin-props-sort@npm:10.10.0": + version: 10.10.0 + resolution: "jss-plugin-props-sort@npm:10.10.0" + dependencies: + "@babel/runtime": ^7.3.1 + jss: 10.10.0 + checksum: 274483444b6733bd58d229ebdcdb32b3c24172bc83cb2f6f8364926de19acd872758bcf06c7b3af11cf75504a67a7d67abba62b25081d144585a56b4df9512ba + languageName: node + linkType: hard + +"jss-plugin-rule-value-function@npm:10.10.0": + version: 10.10.0 + resolution: "jss-plugin-rule-value-function@npm:10.10.0" + dependencies: + "@babel/runtime": ^7.3.1 + jss: 10.10.0 + tiny-warning: ^1.0.2 + checksum: 009c9593b9be8b9f1030b797e58e3c233d90e034e5c68b0cabd25bffc7da965c69dc1ccb1bb6a542d72bb824df89036b2264fe564e8538320ef99febaf2882ee + languageName: node + linkType: hard + +"jss-plugin-rule-value-observable@npm:10.10.0": + version: 10.10.0 + resolution: "jss-plugin-rule-value-observable@npm:10.10.0" + dependencies: + "@babel/runtime": ^7.3.1 + jss: 10.10.0 + symbol-observable: ^1.2.0 + checksum: ec549b1ce8d8a356145378eac22bee8afdfe8cc4ee94237e9009a9b0d5dc228ed04cf1924b6628a625cf44f27aa34593dce482a14cd1e04a4c1e9cc3b80e5db4 + languageName: node + linkType: hard + +"jss-plugin-template@npm:10.10.0": + version: 10.10.0 + resolution: "jss-plugin-template@npm:10.10.0" + dependencies: + "@babel/runtime": ^7.3.1 + jss: 10.10.0 + tiny-warning: ^1.0.2 + checksum: 695e0b1d60679736134d70cf886d5ba001412e863624cbae08bf6bdf33188a670b3083bb229f1253cf6555288e7929b33ff622ab3b6d7ec68a72ab335f580223 + languageName: node + linkType: hard + +"jss-plugin-vendor-prefixer@npm:10.10.0": + version: 10.10.0 + resolution: "jss-plugin-vendor-prefixer@npm:10.10.0" + dependencies: + "@babel/runtime": ^7.3.1 + css-vendor: ^2.0.8 + jss: 10.10.0 + checksum: 879b7233f9b0b571074dc2b88d97a05dbb949012ba2405f1481bbedd521167dc835133632adb3f2d8ffceddd337c8c13e3e8b1931590516c0664039598752dff + languageName: node + linkType: hard + +"jss-preset-default@npm:10.10.0, jss-preset-default@npm:^10.10.0": + version: 10.10.0 + resolution: "jss-preset-default@npm:10.10.0" + dependencies: + "@babel/runtime": ^7.3.1 + jss: 10.10.0 + jss-plugin-camel-case: 10.10.0 + jss-plugin-compose: 10.10.0 + jss-plugin-default-unit: 10.10.0 + jss-plugin-expand: 10.10.0 + jss-plugin-extend: 10.10.0 + jss-plugin-global: 10.10.0 + jss-plugin-nested: 10.10.0 + jss-plugin-props-sort: 10.10.0 + jss-plugin-rule-value-function: 10.10.0 + jss-plugin-rule-value-observable: 10.10.0 + jss-plugin-template: 10.10.0 + jss-plugin-vendor-prefixer: 10.10.0 + checksum: 128c37333566868f008b315a051a76781f4d78f5e1f9eea25d69841057c659a4d3d0937cc665e9ac9a80a12ea6028cec4a8efa2a3f942b4b831f47244fbf32e3 + languageName: node + linkType: hard + +"jss@npm:10.10.0, jss@npm:^10.10.0": + version: 10.10.0 + resolution: "jss@npm:10.10.0" + dependencies: + "@babel/runtime": ^7.3.1 + csstype: ^3.0.2 + is-in-browser: ^1.1.3 + tiny-warning: ^1.0.2 + checksum: ecf71971df42729668c283e432e841349b7fdbe52e520f7704991cf4a738fd2451ec0feeb25c12cdc5addf7facecf838e74e62936fd461fb4c99f23d54a4792d + languageName: node + linkType: hard + "kind-of@npm:^6.0.2": version: 6.0.3 resolution: "kind-of@npm:6.0.3" @@ -13870,6 +14103,7 @@ __metadata: react: 18 react-color: ^2.19.3 react-dom: 18 + react-form-stepper: ^2.0.3 react-native: ^0.72.3 react-native-svg: ^13.10.0 react-redux: ^8.1.2 @@ -14728,7 +14962,7 @@ __metadata: languageName: node linkType: hard -"prop-types@npm:*, prop-types@npm:^15.5.10, prop-types@npm:^15.7.2": +"prop-types@npm:*, prop-types@npm:^15.5.10, prop-types@npm:^15.5.8, prop-types@npm:^15.6.0, prop-types@npm:^15.7.2": version: 15.8.1 resolution: "prop-types@npm:15.8.1" dependencies: @@ -14930,6 +15164,13 @@ __metadata: languageName: node linkType: hard +"react-display-name@npm:^0.2.4": + version: 0.2.5 + resolution: "react-display-name@npm:0.2.5" + checksum: ba27778c975e09afea2bfb58c4052b9e12121329a5115391564085ec64293f2b54d3408b841ad04600142c37d40493442676bf1124d0cc0e68f2f1e02762812b + languageName: node + linkType: hard + "react-docgen-typescript@npm:^2.2.2": version: 2.2.2 resolution: "react-docgen-typescript@npm:2.2.2" @@ -14985,6 +15226,19 @@ __metadata: languageName: node linkType: hard +"react-form-stepper@npm:^2.0.3": + version: 2.0.3 + resolution: "react-form-stepper@npm:2.0.3" + dependencies: + clsx: ^1.1.1 + color: ^3.2.1 + react-jss: ^10.9.1-alpha.2 + peerDependencies: + react: ">=16" + checksum: cf4f00c26ff6a4fcb86e5387c9bb86e013426d7e9ac7c1e72bdbe20e9df0685bb55521ea9adda35a3d137f2dfab6c8ae44ce2d5dc3ab022aa353e28962f32102 + languageName: node + linkType: hard + "react-inspector@npm:6.0.2, react-inspector@npm:^6.0.0": version: 6.0.2 resolution: "react-inspector@npm:6.0.2" @@ -15022,6 +15276,27 @@ __metadata: languageName: node linkType: hard +"react-jss@npm:^10.9.1-alpha.2": + version: 10.10.0 + resolution: "react-jss@npm:10.10.0" + dependencies: + "@babel/runtime": ^7.3.1 + "@emotion/is-prop-valid": ^0.7.3 + css-jss: 10.10.0 + hoist-non-react-statics: ^3.2.0 + is-in-browser: ^1.1.3 + jss: 10.10.0 + jss-preset-default: 10.10.0 + prop-types: ^15.6.0 + shallow-equal: ^1.2.0 + theming: ^3.3.0 + tiny-warning: ^1.0.2 + peerDependencies: + react: ">=16.8.6" + checksum: d51ee9335a56c4881b8d36133c23336536cd4b200d17c04f8b3f53da2e8a5fc42707b63fe728c948c4d919a95bde0c1b9cdb600c7b89b1c30d0e0f611becad39 + languageName: node + linkType: hard + "react-lifecycles-compat@npm:^3.0.4": version: 3.0.4 resolution: "react-lifecycles-compat@npm:3.0.4" @@ -15902,6 +16177,13 @@ __metadata: languageName: node linkType: hard +"shallow-equal@npm:^1.2.0": + version: 1.2.1 + resolution: "shallow-equal@npm:1.2.1" + checksum: 4f1645cc516e7754c4438db687e1da439a5f29a7dba2ba90c5f88e5708aeb17bc4355ba45cad805b0e95dc898e37d8bf6d77d854919c7512f89939986cff8cd1 + languageName: node + linkType: hard + "shebang-command@npm:^2.0.0": version: 2.0.0 resolution: "shebang-command@npm:2.0.0" @@ -15950,6 +16232,15 @@ __metadata: languageName: node linkType: hard +"simple-swizzle@npm:^0.2.2": + version: 0.2.2 + resolution: "simple-swizzle@npm:0.2.2" + dependencies: + is-arrayish: ^0.3.1 + checksum: a7f3f2ab5c76c4472d5c578df892e857323e452d9f392e1b5cf74b74db66e6294a1e1b8b390b519fa1b96b5b613f2a37db6cffef52c3f1f8f3c5ea64eb2d54c0 + languageName: node + linkType: hard + "simple-update-notifier@npm:^2.0.0": version: 2.0.0 resolution: "simple-update-notifier@npm:2.0.0" @@ -16433,6 +16724,13 @@ __metadata: languageName: node linkType: hard +"symbol-observable@npm:^1.2.0": + version: 1.2.0 + resolution: "symbol-observable@npm:1.2.0" + checksum: 48ffbc22e3d75f9853b3ff2ae94a44d84f386415110aea5effc24d84c502e03a4a6b7a8f75ebaf7b585780bda34eb5d6da3121f826a6f93398429d30032971b6 + languageName: node + linkType: hard + "synchronous-promise@npm:^2.0.15": version: 2.0.17 resolution: "synchronous-promise@npm:2.0.17" @@ -16627,6 +16925,20 @@ __metadata: languageName: node linkType: hard +"theming@npm:^3.3.0": + version: 3.3.0 + resolution: "theming@npm:3.3.0" + dependencies: + hoist-non-react-statics: ^3.3.0 + prop-types: ^15.5.8 + react-display-name: ^0.2.4 + tiny-warning: ^1.0.2 + peerDependencies: + react: ">=16.3" + checksum: cb85008983d53460c26761edde2b264d825d15efc455ed32299a76c7a21425607bf53019f0d5d05699569ce808fb8ec1e4c3e56a41ebbf2c80c27358288c315f + languageName: node + linkType: hard + "throat@npm:^5.0.0": version: 5.0.0 resolution: "throat@npm:5.0.0" @@ -16651,6 +16963,13 @@ __metadata: languageName: node linkType: hard +"tiny-warning@npm:^1.0.2": + version: 1.0.3 + resolution: "tiny-warning@npm:1.0.3" + checksum: da62c4acac565902f0624b123eed6dd3509bc9a8d30c06e017104bedcf5d35810da8ff72864400ad19c5c7806fc0a8323c68baf3e326af7cb7d969f846100d71 + languageName: node + linkType: hard + "tinycolor2@npm:^1.4.1": version: 1.6.0 resolution: "tinycolor2@npm:1.6.0"