Create onboarding page

This commit is contained in:
Hristo Nedelkov 2023-08-23 10:10:52 +03:00
parent dc7a7a9b4d
commit 8bfcd141e6
4 changed files with 370 additions and 6 deletions

View File

@ -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",

View File

@ -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: <PairDevice />,
},
{ path: '/create-local-node', element: <CreateLocalNodePage /> },
{ path: '/validator-onboarding', element: <ValidatorOnboarding /> },
])
function App() {

View File

@ -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 (
<>
<PageWrapperShadow rightImageSrc="./background-images/landing-page-bg.png">
<YStack className="landing-page">
<YStack style={{ width: '100%', margin: '30vh 0 4vh' }}>
<Title>Light and performant clients, for all Ethereum validators.</Title>
<Text size={15} weight="regular">
<strong>Nimbus Nodes</strong> allows you to take control and ownership of the services
you wish to run in a completely trustless and decentralized manner.
</Text>
</YStack>
<FormStepper />
<XStack>
<StatusButton icon={<NodeIcon size={20} />} onPress={getStartedHanlder}>
Get Started
</StatusButton>
</XStack>
</YStack>
</PageWrapperShadow>
<QuickStartBar />
</>
)
}
export default ValidatorOnboarding

331
yarn.lock
View File

@ -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"