From 8bfcd141e6d15389675df657cc6dd233e7e676bb Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Wed, 23 Aug 2023 10:10:52 +0300 Subject: [PATCH 001/357] 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" From ec382bffb722628818674c3d618202ad5381d8e6 Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Wed, 23 Aug 2023 10:11:25 +0300 Subject: [PATCH 002/357] Add stepper from react-form-stepper --- src/pages/ValidatorOnboarding/Stepper.tsx | 41 +++++++++++++++++++++++ 1 file changed, 41 insertions(+) create mode 100644 src/pages/ValidatorOnboarding/Stepper.tsx diff --git a/src/pages/ValidatorOnboarding/Stepper.tsx b/src/pages/ValidatorOnboarding/Stepper.tsx new file mode 100644 index 00000000..805f9652 --- /dev/null +++ b/src/pages/ValidatorOnboarding/Stepper.tsx @@ -0,0 +1,41 @@ +import React, { useState } from 'react'; +import { Stepper, Step } from 'react-form-stepper'; + +const FormStepper: React.FC = () => { + const [activeStep, setActiveStep] = useState(0); + + return ( +
+ + setActiveStep(0)} + /> + {Array(4).fill(0).map((_, index) => ( + Understand your Duties} + onClick={() => setActiveStep(index + 1)} + /> + ))} + +
+ ); +} + +const stepStyle = { + defaultColor: '#FFFFFF', + activeColor: '#2A4CF4', +}; + +const customConnectorStyle = { + backgroundColor: '#DDE1E6', + height: '2px', +}; + +export default FormStepper; From 3ed5965795f7233e9c2daff8ad275878d739b483 Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Wed, 23 Aug 2023 11:41:27 +0300 Subject: [PATCH 003/357] Style stepper --- src/pages/ValidatorOnboarding/Stepper.tsx | 59 +++++++++++-------- .../ValidatorOnboarding.tsx | 2 +- 2 files changed, 35 insertions(+), 26 deletions(-) diff --git a/src/pages/ValidatorOnboarding/Stepper.tsx b/src/pages/ValidatorOnboarding/Stepper.tsx index 805f9652..0ea6147e 100644 --- a/src/pages/ValidatorOnboarding/Stepper.tsx +++ b/src/pages/ValidatorOnboarding/Stepper.tsx @@ -1,41 +1,50 @@ -import React, { useState } from 'react'; -import { Stepper, Step } from 'react-form-stepper'; +import { Text } from '@status-im/components' +import React, { useState } from 'react' +import { Stepper, Step } from 'react-form-stepper' const FormStepper: React.FC = () => { - const [activeStep, setActiveStep] = useState(0); + const [activeStep, setActiveStep] = useState(0) return (
- - setActiveStep(0)} - /> - {Array(4).fill(0).map((_, index) => ( - Understand your Duties} - onClick={() => setActiveStep(index + 1)} - /> - ))} + setActiveStep(0)} completed={activeStep >= 0} /> + setActiveStep(1)} completed={activeStep > 0} /> + setActiveStep(2)} completed={activeStep > 1} /> + setActiveStep(3)} completed={activeStep > 2} /> + setActiveStep(4)} completed={activeStep > 3} />
- ); + ) } const stepStyle = { - defaultColor: '#FFFFFF', - activeColor: '#2A4CF4', -}; + activeBgColor: '#2A4CF4', + completedBgColor: '#a10308', + inactiveBgColor: '#e0e0e0', + activeTextColor: '#ffffff', + completedTextColor: '#ffffff', + inactiveTextColor: '#000000', // assuming you want black text for inactive steps + size: '2em', + circleFontSize: '1rem', + labelFontSize: '0.875rem', + borderRadius: '50%', + fontWeight: 500, +} const customConnectorStyle = { + activeColor: '#2A4CF4', + disabledColor: '#bdbdbd', // color when a step is disabled + completedColor: '#a10308', // color for completed steps backgroundColor: '#DDE1E6', height: '2px', -}; + style: 'solid', // style of the connector line +} -export default FormStepper; +export default FormStepper diff --git a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx index 3115cd82..3b2ab9f8 100644 --- a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx @@ -16,7 +16,7 @@ function ValidatorOnboarding() { return ( <> - + Light and performant clients, for all Ethereum validators. From 1bb2dd84d93001ce70fddf63e6e52341f33cea2e Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Wed, 23 Aug 2023 12:03:06 +0300 Subject: [PATCH 004/357] Style stepper --- src/pages/ValidatorOnboarding/Stepper.tsx | 63 ++++++++++++++----- .../ValidatorOnboarding/StepperStyles.css | 36 +++++++++++ .../ValidatorOnboarding.tsx | 9 +-- 3 files changed, 89 insertions(+), 19 deletions(-) create mode 100644 src/pages/ValidatorOnboarding/StepperStyles.css diff --git a/src/pages/ValidatorOnboarding/Stepper.tsx b/src/pages/ValidatorOnboarding/Stepper.tsx index 0ea6147e..381564b7 100644 --- a/src/pages/ValidatorOnboarding/Stepper.tsx +++ b/src/pages/ValidatorOnboarding/Stepper.tsx @@ -1,4 +1,4 @@ -import { Text } from '@status-im/components' +import './StepperStyles.css' import React, { useState } from 'react' import { Stepper, Step } from 'react-form-stepper' @@ -6,7 +6,7 @@ const FormStepper: React.FC = () => { const [activeStep, setActiveStep] = useState(0) return ( -
+
{ connectorStyleConfig={customConnectorStyle} style={{ fontSize: '14px' }} > - setActiveStep(0)} completed={activeStep >= 0} /> - setActiveStep(1)} completed={activeStep > 0} /> - setActiveStep(2)} completed={activeStep > 1} /> - setActiveStep(3)} completed={activeStep > 2} /> - setActiveStep(4)} completed={activeStep > 3} /> + setActiveStep(0)} + completed={activeStep >= 0} + /> + setActiveStep(1)} + completed={activeStep > 0} + /> + setActiveStep(2)} + completed={activeStep > 1} + /> + setActiveStep(3)} + completed={activeStep > 2} + /> + setActiveStep(4)} + completed={activeStep > 3} + />
) } - const stepStyle = { - activeBgColor: '#2A4CF4', - completedBgColor: '#a10308', - inactiveBgColor: '#e0e0e0', + // For default dots: + inactiveBgColor: '#FFFFFF', + inactiveBorderColor: '#E0E0E0', // added this for border color + inactiveBorderWidth: '2px', // added this for border width + + // For active dots: + activeBgColor: '#FFFFFF', + activeBorderColor: '#2A4CF4', // added this for border color + activeBorderWidth: '2px', // added this for border width + + // For completed dots: + completedBgColor: '#2A4CF4', + activeTextColor: '#ffffff', completedTextColor: '#ffffff', inactiveTextColor: '#000000', // assuming you want black text for inactive steps - size: '2em', - circleFontSize: '1rem', + size: '20px', // Width & height of the circle dot + circleFontSize: '10px', // This makes the numbers in the circle smaller labelFontSize: '0.875rem', borderRadius: '50%', fontWeight: 500, } const customConnectorStyle = { + size: '2px', activeColor: '#2A4CF4', disabledColor: '#bdbdbd', // color when a step is disabled completedColor: '#a10308', // color for completed steps - backgroundColor: '#DDE1E6', - height: '2px', style: 'solid', // style of the connector line } diff --git a/src/pages/ValidatorOnboarding/StepperStyles.css b/src/pages/ValidatorOnboarding/StepperStyles.css new file mode 100644 index 00000000..9aa5a2c6 --- /dev/null +++ b/src/pages/ValidatorOnboarding/StepperStyles.css @@ -0,0 +1,36 @@ +.custom-step { + background-color: #ffffff; +} + +.custom-step.StepMain--active, +.custom-step.StepMain--completed { + background-color: #2a4cf4; +} + +.custom-step::before { + content: ''; + display: block; + position: absolute; + width: 20px; + height: 20px; + border: 2px solid #e0e0e0; + border-radius: 50%; +} + +.custom-step.StepMain--active::before, +.custom-step.StepMain--completed::before { + border-color: #2a4cf4; +} + +.custom-step.StepMain--active::after { + content: ''; + display: block; + position: absolute; + width: 20px; + height: 20px; + background-color: #2a4cf4; + border-radius: 50%; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} diff --git a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx index 3b2ab9f8..bf314a66 100644 --- a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx @@ -16,13 +16,14 @@ function ValidatorOnboarding() { return ( <> - + - Light and performant clients, for all Ethereum validators. + + Create Nimbus Validator + - Nimbus Nodes allows you to take control and ownership of the services - you wish to run in a completely trustless and decentralized manner. + Earn Rewards for securing the Ethereum Network From 036232b7ed9404525f478f0cb9777c21b6487341 Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Wed, 23 Aug 2023 12:22:18 +0300 Subject: [PATCH 005/357] Add shadow box --- .../PageWrappers/PageWrapperShadow.tsx | 1 + .../ValidatorOnboarding.tsx | 31 +++++++++++++------ 2 files changed, 22 insertions(+), 10 deletions(-) diff --git a/src/components/PageWrappers/PageWrapperShadow.tsx b/src/components/PageWrappers/PageWrapperShadow.tsx index c0e0f2b3..17b9aaf0 100644 --- a/src/components/PageWrappers/PageWrapperShadow.tsx +++ b/src/components/PageWrappers/PageWrapperShadow.tsx @@ -23,6 +23,7 @@ const PageWrapperShadow = ({
{children}
+
background diff --git a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx index bf314a66..6897f1ed 100644 --- a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx @@ -2,10 +2,11 @@ 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 { Shadow, Button as StatusButton, Text } from '@status-im/components' import QuickStartBar from '../../components/General/QuickStartBar/QuickStartBar' import { useNavigate } from 'react-router' import FormStepper from './Stepper' +import Titles from '../../components/General/Titles' function ValidatorOnboarding() { const navigate = useNavigate() @@ -16,8 +17,8 @@ function ValidatorOnboarding() { return ( <> - - + + Create Nimbus Validator @@ -27,15 +28,25 @@ function ValidatorOnboarding() { - - - } onPress={getStartedHanlder}> - Get Started - - + + + + + - ) } From f6b1dd05b4febde0296b40bbba845a2f12471c00 Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Wed, 23 Aug 2023 12:23:04 +0300 Subject: [PATCH 006/357] Update ValidatorOnboarding.tsx --- .../ValidatorOnboarding/ValidatorOnboarding.tsx | 14 ++------------ 1 file changed, 2 insertions(+), 12 deletions(-) diff --git a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx index 6897f1ed..aff2d6b7 100644 --- a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx @@ -1,20 +1,10 @@ -import { XStack, YStack } from 'tamagui' +import { YStack } from 'tamagui' import PageWrapperShadow from '../../components/PageWrappers/PageWrapperShadow' -import Title from '../../components/General/Title' -import { NodeIcon } from '@status-im/icons' -import { Shadow, Button as StatusButton, Text } from '@status-im/components' -import QuickStartBar from '../../components/General/QuickStartBar/QuickStartBar' -import { useNavigate } from 'react-router' +import { Shadow, Text } from '@status-im/components' import FormStepper from './Stepper' import Titles from '../../components/General/Titles' function ValidatorOnboarding() { - const navigate = useNavigate() - - const getStartedHanlder = () => { - navigate('/pair-device') - } - return ( <> From f19773f7944d6abd96b9111965cca7e219f0dd9e Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Wed, 23 Aug 2023 12:26:40 +0300 Subject: [PATCH 007/357] Add new page wrapper --- .../PageWrappers/PageWrapperGradient.tsx | 12 ++++++++++++ .../PageWrappers/layoutGradient.css | 19 +++++++++++++++++++ .../ValidatorOnboarding.tsx | 8 ++++---- 3 files changed, 35 insertions(+), 4 deletions(-) create mode 100644 src/components/PageWrappers/PageWrapperGradient.tsx create mode 100644 src/components/PageWrappers/layoutGradient.css diff --git a/src/components/PageWrappers/PageWrapperGradient.tsx b/src/components/PageWrappers/PageWrapperGradient.tsx new file mode 100644 index 00000000..51ff650a --- /dev/null +++ b/src/components/PageWrappers/PageWrapperGradient.tsx @@ -0,0 +1,12 @@ +import { ReactNode } from 'react' +import './layoutGradient.css' + +type PageWrapperShadowProps = { + children: ReactNode +} + +const PageWrapperGradient = ({ children }: PageWrapperShadowProps) => { + return
{children}
+} + +export default PageWrapperGradient diff --git a/src/components/PageWrappers/layoutGradient.css b/src/components/PageWrappers/layoutGradient.css new file mode 100644 index 00000000..f155d420 --- /dev/null +++ b/src/components/PageWrappers/layoutGradient.css @@ -0,0 +1,19 @@ +.layout { + background-color: #fff; + height: 100%; + position: relative; + display: flex; + flex-wrap: wrap; + overflow: hidden; +} + +.layout::after { + display: block; + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: linear-gradient(to bottom, rgba(113, 64, 253, 0.075) 15%, rgba(255, 255, 255, 0) 50%); +} diff --git a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx index aff2d6b7..2ffd0613 100644 --- a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx @@ -1,15 +1,15 @@ import { YStack } from 'tamagui' -import PageWrapperShadow from '../../components/PageWrappers/PageWrapperShadow' import { Shadow, Text } from '@status-im/components' import FormStepper from './Stepper' import Titles from '../../components/General/Titles' +import PageWrapperGradient from '../../components/PageWrappers/PageWrapperGradient' function ValidatorOnboarding() { return ( <> - + - + Create Nimbus Validator @@ -36,7 +36,7 @@ function ValidatorOnboarding() { - + ) } From 61a73cf4e002df498afb37bbe010627f8cb2849e Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Wed, 23 Aug 2023 12:39:51 +0300 Subject: [PATCH 008/357] style wrapper --- src/components/PageWrappers/PageWrapperGradient.tsx | 6 +++++- src/pages/ValidatorOnboarding/Stepper.tsx | 2 +- src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx | 2 +- 3 files changed, 7 insertions(+), 3 deletions(-) diff --git a/src/components/PageWrappers/PageWrapperGradient.tsx b/src/components/PageWrappers/PageWrapperGradient.tsx index 51ff650a..b809d19a 100644 --- a/src/components/PageWrappers/PageWrapperGradient.tsx +++ b/src/components/PageWrappers/PageWrapperGradient.tsx @@ -6,7 +6,11 @@ type PageWrapperShadowProps = { } const PageWrapperGradient = ({ children }: PageWrapperShadowProps) => { - return
{children}
+ return ( +
+ {children} +
+ ) } export default PageWrapperGradient diff --git a/src/pages/ValidatorOnboarding/Stepper.tsx b/src/pages/ValidatorOnboarding/Stepper.tsx index 381564b7..c4c83f8f 100644 --- a/src/pages/ValidatorOnboarding/Stepper.tsx +++ b/src/pages/ValidatorOnboarding/Stepper.tsx @@ -6,7 +6,7 @@ const FormStepper: React.FC = () => { const [activeStep, setActiveStep] = useState(0) return ( -
+
- + Create Nimbus Validator From 680b193d0f4bf54d0350e123e4d44d97c615d2b0 Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Wed, 23 Aug 2023 12:41:37 +0300 Subject: [PATCH 009/357] Update Stepper.tsx --- src/pages/ValidatorOnboarding/Stepper.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/ValidatorOnboarding/Stepper.tsx b/src/pages/ValidatorOnboarding/Stepper.tsx index c4c83f8f..7e8d8b15 100644 --- a/src/pages/ValidatorOnboarding/Stepper.tsx +++ b/src/pages/ValidatorOnboarding/Stepper.tsx @@ -6,7 +6,7 @@ const FormStepper: React.FC = () => { const [activeStep, setActiveStep] = useState(0) return ( -
+
Date: Wed, 23 Aug 2023 13:05:37 +0300 Subject: [PATCH 010/357] feat: add background image in Shadow container --- .../PageWrappers/PageWrapperGradient.tsx | 10 +++---- .../PageWrappers/layoutGradient.css | 26 +++++++++---------- .../ValidatorOnboarding.tsx | 19 +++++++++++--- 3 files changed, 30 insertions(+), 25 deletions(-) diff --git a/src/components/PageWrappers/PageWrapperGradient.tsx b/src/components/PageWrappers/PageWrapperGradient.tsx index b809d19a..4d4d1217 100644 --- a/src/components/PageWrappers/PageWrapperGradient.tsx +++ b/src/components/PageWrappers/PageWrapperGradient.tsx @@ -1,16 +1,12 @@ import { ReactNode } from 'react' import './layoutGradient.css' -type PageWrapperShadowProps = { +type PageWrapperGradientProps = { children: ReactNode } -const PageWrapperGradient = ({ children }: PageWrapperShadowProps) => { - return ( -
- {children} -
- ) +const PageWrapperGradient = ({ children }: PageWrapperGradientProps) => { + return
{children}
} export default PageWrapperGradient diff --git a/src/components/PageWrappers/layoutGradient.css b/src/components/PageWrappers/layoutGradient.css index f155d420..f421ddaa 100644 --- a/src/components/PageWrappers/layoutGradient.css +++ b/src/components/PageWrappers/layoutGradient.css @@ -1,19 +1,17 @@ -.layout { - background-color: #fff; - height: 100%; - position: relative; - display: flex; - flex-wrap: wrap; - overflow: hidden; -} - -.layout::after { +.gradient-wrapper .image-container::after { display: block; - content: ''; + content: ""; position: absolute; top: 0; - left: 0; - width: 100%; + left: -1%; + width: 50%; height: 100%; - background: linear-gradient(to bottom, rgba(113, 64, 253, 0.075) 15%, rgba(255, 255, 255, 0) 50%); + background: linear-gradient(to right, rgba(255, 255, 255, 1) 25%, rgba(255, 255, 255, 0.0)); } +.gradient-wrapper .image-container .background-img { + position: absolute; + top: 50%; + left: 75%; + height: 230%; + width: auto; +} \ No newline at end of file diff --git a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx index a352e6a8..c7bbaef8 100644 --- a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx @@ -8,7 +8,7 @@ function ValidatorOnboarding() { return ( <> - + Create Nimbus Validator @@ -21,19 +21,30 @@ function ValidatorOnboarding() { - + +
+
+ background +
+
From 2dd9f32a7851bad151f689c97c615f8f0e05151f Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Wed, 23 Aug 2023 13:06:46 +0300 Subject: [PATCH 011/357] Update ValidatorOnboarding.tsx --- src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx index c7bbaef8..baa1af08 100644 --- a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx @@ -16,8 +16,9 @@ function ValidatorOnboarding() { Earn Rewards for securing the Ethereum Network + - + Date: Wed, 23 Aug 2023 13:12:27 +0300 Subject: [PATCH 012/357] Create storybook for stepper --- .../ValidatorOnboarding/Stepper.stories.tsx | 20 +++++++++++++++++++ 1 file changed, 20 insertions(+) create mode 100644 src/pages/ValidatorOnboarding/Stepper.stories.tsx diff --git a/src/pages/ValidatorOnboarding/Stepper.stories.tsx b/src/pages/ValidatorOnboarding/Stepper.stories.tsx new file mode 100644 index 00000000..073ecd98 --- /dev/null +++ b/src/pages/ValidatorOnboarding/Stepper.stories.tsx @@ -0,0 +1,20 @@ +import type { Meta, StoryObj } from '@storybook/react' + +import StepperForm from './Stepper' + +const meta = { + title: 'ValidatorOnboarding/Stepper', + component: StepperForm, + parameters: { + layout: 'centered', + }, + tags: ['autodocs'], + argTypes: {}, +} satisfies Meta + +export default meta +type Story = StoryObj + +export const Stepper: Story = { + args: {}, +} From 0ac63701e3caf871b9157a6bda8c9437795cb8b1 Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Wed, 23 Aug 2023 14:57:41 +0300 Subject: [PATCH 013/357] Clear code and add figma texts --- src/pages/ValidatorOnboarding/Stepper.tsx | 40 +++++++++++------------ 1 file changed, 19 insertions(+), 21 deletions(-) diff --git a/src/pages/ValidatorOnboarding/Stepper.tsx b/src/pages/ValidatorOnboarding/Stepper.tsx index 7e8d8b15..8cb750ec 100644 --- a/src/pages/ValidatorOnboarding/Stepper.tsx +++ b/src/pages/ValidatorOnboarding/Stepper.tsx @@ -1,12 +1,12 @@ import './StepperStyles.css' -import React, { useState } from 'react' +import { useState } from 'react' import { Stepper, Step } from 'react-form-stepper' -const FormStepper: React.FC = () => { +const FormStepper = () => { const [activeStep, setActiveStep] = useState(0) return ( -
+
{ /> setActiveStep(1)} completed={activeStep > 0} /> setActiveStep(2)} completed={activeStep > 1} /> setActiveStep(3)} completed={activeStep > 2} /> setActiveStep(4)} completed={activeStep > 3} @@ -51,33 +51,31 @@ const FormStepper: React.FC = () => { const stepStyle = { // For default dots: inactiveBgColor: '#FFFFFF', - inactiveBorderColor: '#E0E0E0', // added this for border color - inactiveBorderWidth: '2px', // added this for border width - + inactiveBorderColor: '#E0E0E0', + inactiveBorderWidth: '2px', // For active dots: activeBgColor: '#FFFFFF', - activeBorderColor: '#2A4CF4', // added this for border color - activeBorderWidth: '2px', // added this for border width - + activeBorderColor: '#2A4CF4', + activeBorderWidth: '2px', // For completed dots: completedBgColor: '#2A4CF4', activeTextColor: '#ffffff', completedTextColor: '#ffffff', - inactiveTextColor: '#000000', // assuming you want black text for inactive steps - size: '20px', // Width & height of the circle dot - circleFontSize: '10px', // This makes the numbers in the circle smaller - labelFontSize: '0.875rem', + inactiveTextColor: '#000000', + size: '20px', + circleFontSize: '10px', + labelFontSize: '14px', borderRadius: '50%', - fontWeight: 500, + fontWeight: 700, } const customConnectorStyle = { size: '2px', activeColor: '#2A4CF4', - disabledColor: '#bdbdbd', // color when a step is disabled - completedColor: '#a10308', // color for completed steps - style: 'solid', // style of the connector line + disabledColor: '#bdbdbd', + completedColor: '#a10308', + style: 'solid', } export default FormStepper From e6cd435278896cf3ddd7f807776121f413df9123 Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Wed, 23 Aug 2023 15:04:24 +0300 Subject: [PATCH 014/357] Add texts --- .../ValidatorOnboarding.tsx | 24 ++++++++++++++----- 1 file changed, 18 insertions(+), 6 deletions(-) diff --git a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx index baa1af08..62083164 100644 --- a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx @@ -1,7 +1,6 @@ import { YStack } from 'tamagui' import { Shadow, Text } from '@status-im/components' import FormStepper from './Stepper' -import Titles from '../../components/General/Titles' import PageWrapperGradient from '../../components/PageWrappers/PageWrapperGradient' function ValidatorOnboarding() { @@ -31,11 +30,24 @@ function ValidatorOnboarding() { }} className="content" > - - + + + Overview + + + + Becoming a validator is a big responsibility with important preparation steps. Only + start the deposit process when youre ready." + + + By running a validator, you'll be responsible for securing the network and receive + continuous payouts for actions that help the network reach consensus. + + + Since the successful transition to proof-of-stake via The Merge, Ethereum is fully + secured by proof-of-stake validators. By running a validator, you'll be helping to + secure the Ethereum network. +
From 3589097283847921a2e35f44cabba3c92012b737 Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Wed, 23 Aug 2023 15:08:40 +0300 Subject: [PATCH 015/357] Style texts --- src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx index 62083164..8249adb4 100644 --- a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx @@ -1,8 +1,9 @@ -import { YStack } from 'tamagui' +import { Text as TextTam, YStack } from 'tamagui' import { Shadow, Text } from '@status-im/components' import FormStepper from './Stepper' import PageWrapperGradient from '../../components/PageWrappers/PageWrapperGradient' +Text function ValidatorOnboarding() { return ( <> @@ -21,8 +22,6 @@ function ValidatorOnboarding() { - + Overview - + Becoming a validator is a big responsibility with important preparation steps. Only From b355f38fe5254859e8cca99e01eac62c83d68355 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Thu, 24 Aug 2023 09:49:07 +0300 Subject: [PATCH 016/357] fix: remove max width and add padding --- src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx index 8249adb4..be8a5473 100644 --- a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx @@ -8,7 +8,7 @@ function ValidatorOnboarding() { return ( <> - + Create Nimbus Validator From ca617c43a5e8a183ee8e614b7b8e33a74f5fd7c7 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Thu, 24 Aug 2023 09:51:46 +0300 Subject: [PATCH 017/357] fix: remove not used components --- .../ValidatorOnboarding.tsx | 109 +++++++++--------- 1 file changed, 53 insertions(+), 56 deletions(-) diff --git a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx index be8a5473..735d5625 100644 --- a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx @@ -3,64 +3,61 @@ import { Shadow, Text } from '@status-im/components' import FormStepper from './Stepper' import PageWrapperGradient from '../../components/PageWrappers/PageWrapperGradient' -Text -function ValidatorOnboarding() { +const ValidatorOnboarding = () => { return ( - <> - - - - - Create Nimbus Validator - - - Earn Rewards for securing the Ethereum Network - - - - - - - - Overview - - - - Becoming a validator is a big responsibility with important preparation steps. Only - start the deposit process when youre ready." - - - By running a validator, you'll be responsible for securing the network and receive - continuous payouts for actions that help the network reach consensus. - - - Since the successful transition to proof-of-stake via The Merge, Ethereum is fully - secured by proof-of-stake validators. By running a validator, you'll be helping to - secure the Ethereum network. - - -
-
- background -
-
- + + + + + Create Nimbus Validator + + + Earn Rewards for securing the Ethereum Network + + - - + + + + + Overview + + + + Becoming a validator is a big responsibility with important preparation steps. Only + start the deposit process when youre ready." + + + By running a validator, you'll be responsible for securing the network and receive + continuous payouts for actions that help the network reach consensus. + + + Since the successful transition to proof-of-stake via The Merge, Ethereum is fully + secured by proof-of-stake validators. By running a validator, you'll be helping to + secure the Ethereum network. + + +
+
+ background +
+
+ + + ) } From bf4c721c9b52b786e49488dc8ae93891af25a5c0 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Thu, 24 Aug 2023 10:10:18 +0300 Subject: [PATCH 018/357] fix: remove texts and add titles --- .../ValidatorOnboarding/ValidatorOnboarding.tsx | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx index 735d5625..63aa8c50 100644 --- a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx @@ -2,21 +2,19 @@ import { Text as TextTam, YStack } from 'tamagui' import { Shadow, Text } from '@status-im/components' import FormStepper from './Stepper' import PageWrapperGradient from '../../components/PageWrappers/PageWrapperGradient' +import Titles from '../../components/General/Titles' const ValidatorOnboarding = () => { return ( - - Create Nimbus Validator - - - Earn Rewards for securing the Ethereum Network - + - Date: Thu, 24 Aug 2023 10:12:36 +0300 Subject: [PATCH 019/357] Add button --- src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx index 8249adb4..320f2c61 100644 --- a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx @@ -1,5 +1,5 @@ -import { Text as TextTam, YStack } from 'tamagui' -import { Shadow, Text } from '@status-im/components' +import { Stack, Text as TextTam, YStack } from 'tamagui' +import { Button, Shadow, Text } from '@status-im/components' import FormStepper from './Stepper' import PageWrapperGradient from '../../components/PageWrappers/PageWrapperGradient' @@ -8,7 +8,7 @@ function ValidatorOnboarding() { return ( <> - + Create Nimbus Validator @@ -58,6 +58,11 @@ function ValidatorOnboarding() {
+ + + From c968709dd1e9dda66d31c908f11b1de153521c9b Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Thu, 24 Aug 2023 10:17:35 +0300 Subject: [PATCH 020/357] Add button --- src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx index a390f172..080966a9 100644 --- a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx @@ -54,6 +54,9 @@ const ValidatorOnboarding = () => {
+ + + ) From 29c8aec33fdfeb26c741f6e098d57544f2e58efa Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Thu, 24 Aug 2023 10:27:06 +0300 Subject: [PATCH 021/357] fix: style stepper --- src/pages/ValidatorOnboarding/Stepper.tsx | 79 +++++++++---------- .../ValidatorOnboarding/StepperStyles.css | 2 - 2 files changed, 38 insertions(+), 43 deletions(-) diff --git a/src/pages/ValidatorOnboarding/Stepper.tsx b/src/pages/ValidatorOnboarding/Stepper.tsx index 8cb750ec..bb1ea79d 100644 --- a/src/pages/ValidatorOnboarding/Stepper.tsx +++ b/src/pages/ValidatorOnboarding/Stepper.tsx @@ -6,46 +6,44 @@ const FormStepper = () => { const [activeStep, setActiveStep] = useState(0) return ( -
- - setActiveStep(0)} - completed={activeStep >= 0} - /> - setActiveStep(1)} - completed={activeStep > 0} - /> - setActiveStep(2)} - completed={activeStep > 1} - /> - setActiveStep(3)} - completed={activeStep > 2} - /> - setActiveStep(4)} - completed={activeStep > 3} - /> - -
+ + setActiveStep(0)} + completed={activeStep >= 0} + /> + setActiveStep(1)} + completed={activeStep > 0} + /> + setActiveStep(2)} + completed={activeStep > 1} + /> + setActiveStep(3)} + completed={activeStep > 2} + /> + setActiveStep(4)} + completed={activeStep > 3} + /> + ) } const stepStyle = { @@ -59,7 +57,6 @@ const stepStyle = { activeBorderWidth: '2px', // For completed dots: completedBgColor: '#2A4CF4', - activeTextColor: '#ffffff', completedTextColor: '#ffffff', inactiveTextColor: '#000000', diff --git a/src/pages/ValidatorOnboarding/StepperStyles.css b/src/pages/ValidatorOnboarding/StepperStyles.css index 9aa5a2c6..a276a5f1 100644 --- a/src/pages/ValidatorOnboarding/StepperStyles.css +++ b/src/pages/ValidatorOnboarding/StepperStyles.css @@ -30,7 +30,5 @@ height: 20px; background-color: #2a4cf4; border-radius: 50%; - top: 50%; - left: 50%; transform: translate(-50%, -50%); } From b51a54596ec64f35845e3245b17abff91776ed39 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Thu, 24 Aug 2023 10:29:59 +0300 Subject: [PATCH 022/357] fix: stepper name collision --- .../{StepperStyles.css => FormStepper.css} | 0 .../{Stepper.stories.tsx => FormStepper.stories.tsx} | 8 ++++---- .../ValidatorOnboarding/{Stepper.tsx => FormStepper.tsx} | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) rename src/pages/ValidatorOnboarding/{StepperStyles.css => FormStepper.css} (100%) rename src/pages/ValidatorOnboarding/{Stepper.stories.tsx => FormStepper.stories.tsx} (63%) rename src/pages/ValidatorOnboarding/{Stepper.tsx => FormStepper.tsx} (98%) diff --git a/src/pages/ValidatorOnboarding/StepperStyles.css b/src/pages/ValidatorOnboarding/FormStepper.css similarity index 100% rename from src/pages/ValidatorOnboarding/StepperStyles.css rename to src/pages/ValidatorOnboarding/FormStepper.css diff --git a/src/pages/ValidatorOnboarding/Stepper.stories.tsx b/src/pages/ValidatorOnboarding/FormStepper.stories.tsx similarity index 63% rename from src/pages/ValidatorOnboarding/Stepper.stories.tsx rename to src/pages/ValidatorOnboarding/FormStepper.stories.tsx index 073ecd98..137491db 100644 --- a/src/pages/ValidatorOnboarding/Stepper.stories.tsx +++ b/src/pages/ValidatorOnboarding/FormStepper.stories.tsx @@ -1,16 +1,16 @@ import type { Meta, StoryObj } from '@storybook/react' -import StepperForm from './Stepper' +import FormStepper from './FormStepper' const meta = { - title: 'ValidatorOnboarding/Stepper', - component: StepperForm, + title: 'ValidatorOnboarding/FormStepper', + component: FormStepper, parameters: { layout: 'centered', }, tags: ['autodocs'], argTypes: {}, -} satisfies Meta +} satisfies Meta export default meta type Story = StoryObj diff --git a/src/pages/ValidatorOnboarding/Stepper.tsx b/src/pages/ValidatorOnboarding/FormStepper.tsx similarity index 98% rename from src/pages/ValidatorOnboarding/Stepper.tsx rename to src/pages/ValidatorOnboarding/FormStepper.tsx index bb1ea79d..294f0fc4 100644 --- a/src/pages/ValidatorOnboarding/Stepper.tsx +++ b/src/pages/ValidatorOnboarding/FormStepper.tsx @@ -1,6 +1,6 @@ -import './StepperStyles.css' import { useState } from 'react' import { Stepper, Step } from 'react-form-stepper' +import './FormStepper.css' const FormStepper = () => { const [activeStep, setActiveStep] = useState(0) From 015cfee5e3b31aa0cd9c04e6caa0b1e02e7ffc77 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Thu, 24 Aug 2023 10:32:56 +0300 Subject: [PATCH 023/357] fix: validator component style --- .../ValidatorOnboarding.tsx | 31 ++++++++++++------- 1 file changed, 19 insertions(+), 12 deletions(-) diff --git a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx index 080966a9..a82a5a49 100644 --- a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx @@ -1,20 +1,27 @@ import { Stack, Text as TextTam, YStack } from 'tamagui' import { Button, Shadow, Text } from '@status-im/components' -import FormStepper from './Stepper' +import FormStepper from './FormStepper' import PageWrapperGradient from '../../components/PageWrappers/PageWrapperGradient' import Titles from '../../components/General/Titles' const ValidatorOnboarding = () => { return ( - - - - - + + + { }} className="content" > - - + + Overview @@ -54,7 +61,7 @@ const ValidatorOnboarding = () => { - + From e409b4cb057ab8632d85a5e8d0a7c9af9c2d3d2f Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Thu, 24 Aug 2023 10:34:05 +0300 Subject: [PATCH 024/357] fix: button position --- src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx index a82a5a49..f55a6761 100644 --- a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx @@ -61,8 +61,8 @@ const ValidatorOnboarding = () => { - - + + From 760bf11b5f06cb00d096f90ae199faa3c3850acf Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Thu, 24 Aug 2023 10:37:32 +0300 Subject: [PATCH 025/357] feat: change spacing between components --- src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx index f55a6761..fd00fe94 100644 --- a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx @@ -11,11 +11,10 @@ const ValidatorOnboarding = () => { style={{ width: '100%', margin: '0 auto', - padding: '3% 10%', + padding: '2% 10%', justifyContent: 'start', alignItems: 'start', }} - space={4} > { className="content" > - + Overview Becoming a validator is a big responsibility with important preparation steps. Only - start the deposit process when youre ready." + start the deposit process when youre ready. By running a validator, you'll be responsible for securing the network and receive @@ -61,7 +60,7 @@ const ValidatorOnboarding = () => { - + From 5d709b4874f2b23918a4edcda623119eb4d686cb Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Thu, 24 Aug 2023 10:41:03 +0300 Subject: [PATCH 026/357] fix: use text instead of title in Landing Page --- src/pages/LandingPage/LandingPage.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/pages/LandingPage/LandingPage.tsx b/src/pages/LandingPage/LandingPage.tsx index c3833354..d5ef509c 100644 --- a/src/pages/LandingPage/LandingPage.tsx +++ b/src/pages/LandingPage/LandingPage.tsx @@ -1,7 +1,6 @@ import './LandingPage.css' import { XStack, YStack } from 'tamagui' import PageWrapperShadow from '../../components/PageWrappers/PageWrapperShadow' -import Title from '../../components/General/Title' import NimbusLogo from '../../components/Logos/NimbusLogo' import { NodeIcon } from '@status-im/icons' import { Button as StatusButton, Text } from '@status-im/components' @@ -24,7 +23,9 @@ function LandingPage() { - Light and performant clients, for all Ethereum validators. + + 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. From 210108f0ed71d207cb1333255f56b344ed1fe1e2 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Thu, 24 Aug 2023 10:41:22 +0300 Subject: [PATCH 027/357] fix: delete title and subtitle and use only titles --- src/components/General/SubTitle.tsx | 16 ---------------- src/components/General/Title.tsx | 16 ---------------- src/components/General/Titles.tsx | 9 ++++----- 3 files changed, 4 insertions(+), 37 deletions(-) delete mode 100644 src/components/General/SubTitle.tsx delete mode 100644 src/components/General/Title.tsx diff --git a/src/components/General/SubTitle.tsx b/src/components/General/SubTitle.tsx deleted file mode 100644 index 7eea219d..00000000 --- a/src/components/General/SubTitle.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { Text } from '@status-im/components' - -type SubTitleProps = { - color?: string - children: string -} - -const SubTitle = ({ color, children }: SubTitleProps) => { - return ( - - {children} - - ) -} - -export default SubTitle diff --git a/src/components/General/Title.tsx b/src/components/General/Title.tsx deleted file mode 100644 index 925e590b..00000000 --- a/src/components/General/Title.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { Text } from '@status-im/components' - -type TitleProps = { - color?: string - children: string -} - -const Title = ({ color, children }: TitleProps) => { - return ( - - {children} - - ) -} - -export default Title diff --git a/src/components/General/Titles.tsx b/src/components/General/Titles.tsx index c9105389..a8ab315e 100644 --- a/src/components/General/Titles.tsx +++ b/src/components/General/Titles.tsx @@ -1,6 +1,5 @@ import { XStack, YStack } from 'tamagui' import { Button, Text } from '@status-im/components' -import Title from './Title' import { RevealIcon } from '@status-im/icons' type TitlesProps = { @@ -13,16 +12,16 @@ const Titles = ({ title, subtitle, isAdvancedSettings }: TitlesProps) => { return ( - {title} + + {title} + {isAdvancedSettings && ( )} - - {subtitle} - + {subtitle} ) } From 65b7a5eb1f6306d3aa2d8426b62734475d40c874 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Thu, 24 Aug 2023 10:43:29 +0300 Subject: [PATCH 028/357] feat: update titles to receive sizes --- src/components/General/Titles.tsx | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/src/components/General/Titles.tsx b/src/components/General/Titles.tsx index a8ab315e..80ff9ef4 100644 --- a/src/components/General/Titles.tsx +++ b/src/components/General/Titles.tsx @@ -6,13 +6,21 @@ type TitlesProps = { title: string subtitle: string isAdvancedSettings?: boolean + titleSize?: 27 | 15 | 11 | 13 | 19 + subtitleSize?: 27 | 15 | 11 | 13 | 19 } -const Titles = ({ title, subtitle, isAdvancedSettings }: TitlesProps) => { +const Titles = ({ + title, + subtitle, + isAdvancedSettings, + titleSize = 27, + subtitleSize = 15, +}: TitlesProps) => { return ( - + {title} {isAdvancedSettings && ( @@ -21,7 +29,7 @@ const Titles = ({ title, subtitle, isAdvancedSettings }: TitlesProps) => { )} - {subtitle} + {subtitle} ) } From 9fb539dee04e6c9a9cf448c06b963de7568c26d7 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Thu, 24 Aug 2023 10:45:14 +0300 Subject: [PATCH 029/357] feat: add size for title --- src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx index fd00fe94..fd02ac28 100644 --- a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx @@ -18,6 +18,7 @@ const ValidatorOnboarding = () => { > From f0da1baa199b49c7f1ca4846c226b639a604ea31 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Thu, 24 Aug 2023 10:49:18 +0300 Subject: [PATCH 030/357] feat: remove state and get it from parent --- src/pages/ValidatorOnboarding/FormStepper.tsx | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/src/pages/ValidatorOnboarding/FormStepper.tsx b/src/pages/ValidatorOnboarding/FormStepper.tsx index 294f0fc4..b4e0bef1 100644 --- a/src/pages/ValidatorOnboarding/FormStepper.tsx +++ b/src/pages/ValidatorOnboarding/FormStepper.tsx @@ -1,10 +1,12 @@ -import { useState } from 'react' import { Stepper, Step } from 'react-form-stepper' import './FormStepper.css' -const FormStepper = () => { - const [activeStep, setActiveStep] = useState(0) +type FormStepperProps = { + activeStep: number + changeActiveStep: (step: number) => void +} +const FormStepper = ({ activeStep, changeActiveStep }: FormStepperProps) => { return ( { setActiveStep(0)} + onClick={() => changeActiveStep(0)} completed={activeStep >= 0} /> setActiveStep(1)} + onClick={() => changeActiveStep(1)} completed={activeStep > 0} /> setActiveStep(2)} + onClick={() => changeActiveStep(2)} completed={activeStep > 1} /> setActiveStep(3)} + onClick={() => changeActiveStep(3)} completed={activeStep > 2} /> setActiveStep(4)} + onClick={() => changeActiveStep(4)} completed={activeStep > 3} /> From 0ba80804df6be1b67122c2958b546d66b78ffb67 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Thu, 24 Aug 2023 10:51:47 +0300 Subject: [PATCH 031/357] feat: add state and show only active step --- .../ValidatorOnboarding.tsx | 95 +++++++++++-------- 1 file changed, 53 insertions(+), 42 deletions(-) diff --git a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx index fd02ac28..f83cdfa7 100644 --- a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx @@ -3,8 +3,15 @@ import { Button, Shadow, Text } from '@status-im/components' import FormStepper from './FormStepper' import PageWrapperGradient from '../../components/PageWrappers/PageWrapperGradient' import Titles from '../../components/General/Titles' +import { useState } from 'react' const ValidatorOnboarding = () => { + const [activeStep, setActiveStep] = useState(0) + + const changeActiveStep = (step: number) => { + setActiveStep(step) + } + return ( { titleSize={19} subtitle="Earn Rewards for securing the Ethereum Network" /> - - - - - Overview - + + {activeStep === 0 && ( + <> + + + + Overview + - - Becoming a validator is a big responsibility with important preparation steps. Only - start the deposit process when youre ready. - - - By running a validator, you'll be responsible for securing the network and receive - continuous payouts for actions that help the network reach consensus. - - - Since the successful transition to proof-of-stake via The Merge, Ethereum is fully - secured by proof-of-stake validators. By running a validator, you'll be helping to - secure the Ethereum network. - - -
-
- background -
-
- - - - + + Becoming a validator is a big responsibility with important preparation steps. + Only start the deposit process when youre ready. + + + By running a validator, you'll be responsible for securing the network and receive + continuous payouts for actions that help the network reach consensus. + + + Since the successful transition to proof-of-stake via The Merge, Ethereum is fully + secured by proof-of-stake validators. By running a validator, you'll be helping to + secure the Ethereum network. + + +
+
+ background +
+
+ + + + + + )} ) From e4b09412274a1c1c314a53267a18deef93522b57 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Thu, 24 Aug 2023 10:54:29 +0300 Subject: [PATCH 032/357] feat: separate overview to a component --- src/pages/ValidatorOnboarding/Overview.tsx | 53 +++++++++++++++++++ .../ValidatorOnboarding.tsx | 51 ++---------------- 2 files changed, 56 insertions(+), 48 deletions(-) create mode 100644 src/pages/ValidatorOnboarding/Overview.tsx diff --git a/src/pages/ValidatorOnboarding/Overview.tsx b/src/pages/ValidatorOnboarding/Overview.tsx new file mode 100644 index 00000000..9adb1516 --- /dev/null +++ b/src/pages/ValidatorOnboarding/Overview.tsx @@ -0,0 +1,53 @@ +import { Stack, Text as TextTam, YStack } from 'tamagui' +import { Button, Shadow, Text } from '@status-im/components' + +const Overview = () => { + return ( + <> + + + + Overview + + + + Becoming a validator is a big responsibility with important preparation steps. Only + start the deposit process when youre ready. + + + By running a validator, you'll be responsible for securing the network and receive + continuous payouts for actions that help the network reach consensus. + + + Since the successful transition to proof-of-stake via The Merge, Ethereum is fully + secured by proof-of-stake validators. By running a validator, you'll be helping to + secure the Ethereum network. + + +
+
+ background +
+
+ + + + + + ) +} + +export default Overview diff --git a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx index f83cdfa7..9b1c3e60 100644 --- a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx @@ -1,9 +1,9 @@ -import { Stack, Text as TextTam, YStack } from 'tamagui' -import { Button, Shadow, Text } from '@status-im/components' +import { YStack } from 'tamagui' import FormStepper from './FormStepper' import PageWrapperGradient from '../../components/PageWrappers/PageWrapperGradient' import Titles from '../../components/General/Titles' import { useState } from 'react' +import Overview from './Overview' const ValidatorOnboarding = () => { const [activeStep, setActiveStep] = useState(0) @@ -29,52 +29,7 @@ const ValidatorOnboarding = () => { subtitle="Earn Rewards for securing the Ethereum Network" /> - {activeStep === 0 && ( - <> - - - - Overview - - - - Becoming a validator is a big responsibility with important preparation steps. - Only start the deposit process when youre ready. - - - By running a validator, you'll be responsible for securing the network and receive - continuous payouts for actions that help the network reach consensus. - - - Since the successful transition to proof-of-stake via The Merge, Ethereum is fully - secured by proof-of-stake validators. By running a validator, you'll be helping to - secure the Ethereum network. - - -
-
- background -
-
- - - - - - )} + {activeStep === 0 && } ) From 243909991452bbc9b23d59116a2c7119bd89ad41 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Thu, 24 Aug 2023 10:58:18 +0300 Subject: [PATCH 033/357] fix: add args to stepper story --- src/pages/ValidatorOnboarding/FormStepper.stories.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/pages/ValidatorOnboarding/FormStepper.stories.tsx b/src/pages/ValidatorOnboarding/FormStepper.stories.tsx index 137491db..97db5236 100644 --- a/src/pages/ValidatorOnboarding/FormStepper.stories.tsx +++ b/src/pages/ValidatorOnboarding/FormStepper.stories.tsx @@ -16,5 +16,8 @@ export default meta type Story = StoryObj export const Stepper: Story = { - args: {}, + args: { + activeStep: 0, + changeActiveStep: () => {}, + }, } From b62916825054297b31e5568db483b901cf9f1682 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Thu, 24 Aug 2023 11:21:19 +0300 Subject: [PATCH 034/357] feat: create story for validator page --- .../ValidatorOnboarding.stories.ts | 22 +++++++++++++++++++ 1 file changed, 22 insertions(+) create mode 100644 src/pages/ValidatorOnboarding/ValidatorOnboarding.stories.ts diff --git a/src/pages/ValidatorOnboarding/ValidatorOnboarding.stories.ts b/src/pages/ValidatorOnboarding/ValidatorOnboarding.stories.ts new file mode 100644 index 00000000..e6c51353 --- /dev/null +++ b/src/pages/ValidatorOnboarding/ValidatorOnboarding.stories.ts @@ -0,0 +1,22 @@ +import type { Meta, StoryObj } from '@storybook/react' +import { withRouter } from 'storybook-addon-react-router-v6' + +import ValidatorOnboarding from './ValidatorOnboarding' + +const meta = { + title: 'Pages/ValidatorOnboarding', + component: ValidatorOnboarding, + parameters: { + layout: 'centered', + }, + tags: ['autodocs'], + argTypes: {}, + decorators: [withRouter], +} satisfies Meta + +export default meta +type Story = StoryObj + +export const Page: Story = { + args: {}, +} From 1b748326429eb42f6d3fc1be0d177c0768e6c59d Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Thu, 24 Aug 2023 11:41:58 +0300 Subject: [PATCH 035/357] feat: create story for overview --- ...per.stories.tsx => FormStepper.stories.ts} | 0 .../ValidatorOnboarding/Overview.stories.ts | 22 +++++++++++++++++++ 2 files changed, 22 insertions(+) rename src/pages/ValidatorOnboarding/{FormStepper.stories.tsx => FormStepper.stories.ts} (100%) create mode 100644 src/pages/ValidatorOnboarding/Overview.stories.ts diff --git a/src/pages/ValidatorOnboarding/FormStepper.stories.tsx b/src/pages/ValidatorOnboarding/FormStepper.stories.ts similarity index 100% rename from src/pages/ValidatorOnboarding/FormStepper.stories.tsx rename to src/pages/ValidatorOnboarding/FormStepper.stories.ts diff --git a/src/pages/ValidatorOnboarding/Overview.stories.ts b/src/pages/ValidatorOnboarding/Overview.stories.ts new file mode 100644 index 00000000..5ce2f43c --- /dev/null +++ b/src/pages/ValidatorOnboarding/Overview.stories.ts @@ -0,0 +1,22 @@ +import type { Meta, StoryObj } from '@storybook/react' +import { withRouter } from 'storybook-addon-react-router-v6' + +import Overview from './Overview' + +const meta = { + title: 'ValidatorOnboarding/Overview', + component: Overview, + parameters: { + layout: 'centered', + }, + tags: ['autodocs'], + argTypes: {}, + decorators: [withRouter], +} satisfies Meta + +export default meta +type Story = StoryObj + +export const Page: Story = { + args: {}, +} From 228d7a2932a0c7b72fde65c05e9da5545782ba7b Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Thu, 24 Aug 2023 11:53:01 +0300 Subject: [PATCH 036/357] feat: create component for key generation page --- .../ValidatorOnboarding/KeyGeneration.tsx | 23 +++++++++++++++++++ .../ValidatorOnboarding.tsx | 2 ++ 2 files changed, 25 insertions(+) create mode 100644 src/pages/ValidatorOnboarding/KeyGeneration.tsx diff --git a/src/pages/ValidatorOnboarding/KeyGeneration.tsx b/src/pages/ValidatorOnboarding/KeyGeneration.tsx new file mode 100644 index 00000000..fe88cae0 --- /dev/null +++ b/src/pages/ValidatorOnboarding/KeyGeneration.tsx @@ -0,0 +1,23 @@ +import { Button, Shadow } from '@status-im/components' +import { Stack } from 'tamagui' + +const KeyGeneration = () => { + return ( + <> + + + + + + ) +} + +export default KeyGeneration diff --git a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx index 9b1c3e60..98f831f6 100644 --- a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx @@ -4,6 +4,7 @@ import PageWrapperGradient from '../../components/PageWrappers/PageWrapperGradie import Titles from '../../components/General/Titles' import { useState } from 'react' import Overview from './Overview' +import KeyGeneration from './KeyGeneration' const ValidatorOnboarding = () => { const [activeStep, setActiveStep] = useState(0) @@ -30,6 +31,7 @@ const ValidatorOnboarding = () => { /> {activeStep === 0 && } + {activeStep === 3 && } ) From 1298aff2d2b2637f2e9fdd9765279f0be64df913 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Thu, 24 Aug 2023 11:55:50 +0300 Subject: [PATCH 037/357] feat: create story for key generation --- .../KeyGeneration.stories.ts | 20 +++++++++++++++++++ 1 file changed, 20 insertions(+) create mode 100644 src/pages/ValidatorOnboarding/KeyGeneration.stories.ts diff --git a/src/pages/ValidatorOnboarding/KeyGeneration.stories.ts b/src/pages/ValidatorOnboarding/KeyGeneration.stories.ts new file mode 100644 index 00000000..44da7606 --- /dev/null +++ b/src/pages/ValidatorOnboarding/KeyGeneration.stories.ts @@ -0,0 +1,20 @@ +import type { Meta, StoryObj } from '@storybook/react' + +import KeyGeneration from './KeyGeneration' + +const meta = { + title: 'ValidatorOnboarding/KeyGeneration', + component: KeyGeneration, + parameters: { + layout: 'centered', + }, + tags: ['autodocs'], + argTypes: {}, +} satisfies Meta + +export default meta +type Story = StoryObj + +export const Page: Story = { + args: {}, +} From 61ce9240514969aba50043f09d26c7c8dea330d0 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Thu, 24 Aug 2023 11:59:45 +0300 Subject: [PATCH 038/357] feat: create component for Advicsories --- src/pages/ValidatorOnboarding/Advicsories.tsx | 23 +++++++++++++++++++ 1 file changed, 23 insertions(+) create mode 100644 src/pages/ValidatorOnboarding/Advicsories.tsx diff --git a/src/pages/ValidatorOnboarding/Advicsories.tsx b/src/pages/ValidatorOnboarding/Advicsories.tsx new file mode 100644 index 00000000..43d86f2b --- /dev/null +++ b/src/pages/ValidatorOnboarding/Advicsories.tsx @@ -0,0 +1,23 @@ +import { Button, Shadow } from '@status-im/components' +import { Stack } from 'tamagui' + +const Advicsories = () => { + return ( + <> + + + + + + ) +} + +export default Advicsories From e9385279620e9636f55d2017a9d2a60ddca0cf2c Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Thu, 24 Aug 2023 11:59:55 +0300 Subject: [PATCH 039/357] feat: create component for Activation --- src/pages/ValidatorOnboarding/Activation.tsx | 23 ++++++++++++++++++++ 1 file changed, 23 insertions(+) create mode 100644 src/pages/ValidatorOnboarding/Activation.tsx diff --git a/src/pages/ValidatorOnboarding/Activation.tsx b/src/pages/ValidatorOnboarding/Activation.tsx new file mode 100644 index 00000000..39175d93 --- /dev/null +++ b/src/pages/ValidatorOnboarding/Activation.tsx @@ -0,0 +1,23 @@ +import { Button, Shadow } from '@status-im/components' +import { Stack } from 'tamagui' + +const Activation = () => { + return ( + <> + + + + + + ) +} + +export default Activation From e319761b3f8236936c29c927621934139e5b9985 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Thu, 24 Aug 2023 12:00:55 +0300 Subject: [PATCH 040/357] feat: create component for ValidatorSetup --- .../ValidatorOnboarding/ValidatorSetup.tsx | 23 +++++++++++++++++++ 1 file changed, 23 insertions(+) create mode 100644 src/pages/ValidatorOnboarding/ValidatorSetup.tsx diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup.tsx new file mode 100644 index 00000000..167c62b8 --- /dev/null +++ b/src/pages/ValidatorOnboarding/ValidatorSetup.tsx @@ -0,0 +1,23 @@ +import { Button, Shadow } from '@status-im/components' +import { Stack } from 'tamagui' + +const ValidatorSetup = () => { + return ( + <> + + + + + + ) +} + +export default ValidatorSetup From b8221903709c626da793318ff40207d0f5bd2ee2 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Thu, 24 Aug 2023 12:03:32 +0300 Subject: [PATCH 041/357] feat: add new steps components --- src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx index 98f831f6..f603b414 100644 --- a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx @@ -5,6 +5,9 @@ import Titles from '../../components/General/Titles' import { useState } from 'react' import Overview from './Overview' import KeyGeneration from './KeyGeneration' +import Advicsories from './Advicsories' +import ValidatorSetup from './ValidatorSetup' +import Activation from './Activation' const ValidatorOnboarding = () => { const [activeStep, setActiveStep] = useState(0) @@ -31,7 +34,10 @@ const ValidatorOnboarding = () => { /> {activeStep === 0 && } + {activeStep === 1 && } + {activeStep === 2 && } {activeStep === 3 && } + {activeStep === 4 && } ) From d2a8b4bc9a9e0cabd908702850ea0829f2c20006 Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Thu, 24 Aug 2023 12:10:33 +0300 Subject: [PATCH 042/357] Implement ontop cards --- src/pages/ValidatorOnboarding/Overview.tsx | 77 +++++++++++++++++++++- 1 file changed, 75 insertions(+), 2 deletions(-) diff --git a/src/pages/ValidatorOnboarding/Overview.tsx b/src/pages/ValidatorOnboarding/Overview.tsx index 9adb1516..ea4b166f 100644 --- a/src/pages/ValidatorOnboarding/Overview.tsx +++ b/src/pages/ValidatorOnboarding/Overview.tsx @@ -1,5 +1,6 @@ -import { Stack, Text as TextTam, YStack } from 'tamagui' +import { Stack, Text as TextTam, XStack, YStack } from 'tamagui' import { Button, Shadow, Text } from '@status-im/components' +import { Link } from 'react-router-dom' const Overview = () => { return ( @@ -12,7 +13,6 @@ const Overview = () => { flexDirection: 'row', backgroundColor: '#fff', }} - className="content" > @@ -32,6 +32,79 @@ const Overview = () => { secured by proof-of-stake validators. By running a validator, you'll be helping to secure the Ethereum network. + + Learn more + + + + + Current APR + + + afasfa + + + + + Current APR + + + afasfa + + + + + Current APR + + + afasfa + + + + + Current APR + + + afasfa + + +
From d9a5085525870ba6b6ecfa3517b89b5e20cd735d Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Thu, 24 Aug 2023 12:28:03 +0300 Subject: [PATCH 043/357] add texts and style --- src/pages/ValidatorOnboarding/Overview.tsx | 41 ++++++++++++---------- 1 file changed, 22 insertions(+), 19 deletions(-) diff --git a/src/pages/ValidatorOnboarding/Overview.tsx b/src/pages/ValidatorOnboarding/Overview.tsx index ea4b166f..e4808fa7 100644 --- a/src/pages/ValidatorOnboarding/Overview.tsx +++ b/src/pages/ValidatorOnboarding/Overview.tsx @@ -23,25 +23,31 @@ const Overview = () => { Becoming a validator is a big responsibility with important preparation steps. Only start the deposit process when youre ready. - + By running a validator, you'll be responsible for securing the network and receive continuous payouts for actions that help the network reach consensus. - + Since the successful transition to proof-of-stake via The Merge, Ethereum is fully secured by proof-of-stake validators. By running a validator, you'll be helping to secure the Ethereum network. - Learn more + Learn more - + { Current APR - afasfa + 4.40% { borderRadius: '16px', border: '1px solid rgba(0, 0, 0, 0.15)', backgroundColor: '#FFF', - width: '335px', - + width: '305px', padding: '8px 16px', }} > - Current APR + Total ETH Staked - afasfa + 19,451,123 - Current APR + Estimated Activation Time - afasfa + 32 Days - Current APR + Validator Queue - afasfa + 92603 From 45363f57a1b8887bacd6c892553e032404fd1f34 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Thu, 24 Aug 2023 12:35:33 +0300 Subject: [PATCH 044/357] feat: add stories for steps components --- .../ValidatorOnboarding/Activation.stories.ts | 20 +++++++++++++++++++ .../Advicsories.stories.ts | 20 +++++++++++++++++++ .../ValidatorSetup.stories.ts | 20 +++++++++++++++++++ 3 files changed, 60 insertions(+) create mode 100644 src/pages/ValidatorOnboarding/Activation.stories.ts create mode 100644 src/pages/ValidatorOnboarding/Advicsories.stories.ts create mode 100644 src/pages/ValidatorOnboarding/ValidatorSetup.stories.ts diff --git a/src/pages/ValidatorOnboarding/Activation.stories.ts b/src/pages/ValidatorOnboarding/Activation.stories.ts new file mode 100644 index 00000000..b4665ae2 --- /dev/null +++ b/src/pages/ValidatorOnboarding/Activation.stories.ts @@ -0,0 +1,20 @@ +import type { Meta, StoryObj } from '@storybook/react' + +import Activation from './Activation' + +const meta = { + title: 'ValidatorOnboarding/Activation', + component: Activation, + parameters: { + layout: 'centered', + }, + tags: ['autodocs'], + argTypes: {}, +} satisfies Meta + +export default meta +type Story = StoryObj + +export const Page: Story = { + args: {}, +} diff --git a/src/pages/ValidatorOnboarding/Advicsories.stories.ts b/src/pages/ValidatorOnboarding/Advicsories.stories.ts new file mode 100644 index 00000000..53870035 --- /dev/null +++ b/src/pages/ValidatorOnboarding/Advicsories.stories.ts @@ -0,0 +1,20 @@ +import type { Meta, StoryObj } from '@storybook/react' + +import Advicsories from './Advicsories' + +const meta = { + title: 'ValidatorOnboarding/Advicsories', + component: Advicsories, + parameters: { + layout: 'centered', + }, + tags: ['autodocs'], + argTypes: {}, +} satisfies Meta + +export default meta +type Story = StoryObj + +export const Page: Story = { + args: {}, +} diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup.stories.ts b/src/pages/ValidatorOnboarding/ValidatorSetup.stories.ts new file mode 100644 index 00000000..e4e3f07a --- /dev/null +++ b/src/pages/ValidatorOnboarding/ValidatorSetup.stories.ts @@ -0,0 +1,20 @@ +import type { Meta, StoryObj } from '@storybook/react' + +import ValidatorSetup from './ValidatorSetup' + +const meta = { + title: 'ValidatorOnboarding/ValidatorSetup', + component: ValidatorSetup, + parameters: { + layout: 'centered', + }, + tags: ['autodocs'], + argTypes: {}, +} satisfies Meta + +export default meta +type Story = StoryObj + +export const Page: Story = { + args: {}, +} From f3303568502d47accaad533a6c7b1e202326ce58 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Thu, 24 Aug 2023 12:56:03 +0300 Subject: [PATCH 045/357] feat: create structure for components --- .../{ => Activation}/Activation.stories.ts | 0 .../{ => Activation}/Activation.tsx | 0 .../{ => Advicsories}/Advicsories.stories.ts | 0 .../{ => Advicsories}/Advicsories.tsx | 0 .../{ => FormStepper}/FormStepper.css | 0 .../{ => FormStepper}/FormStepper.stories.ts | 0 .../{ => FormStepper}/FormStepper.tsx | 0 .../{ => KeyGeneration}/KeyGeneration.stories.ts | 0 .../{ => KeyGeneration}/KeyGeneration.tsx | 0 .../{ => Overview}/Overview.stories.ts | 0 .../ValidatorOnboarding/{ => Overview}/Overview.tsx | 2 +- .../ValidatorOnboarding/ValidatorOnboarding.tsx | 12 ++++++------ .../{ => ValidatorSetup}/ValidatorSetup.stories.ts | 0 .../{ => ValidatorSetup}/ValidatorSetup.tsx | 0 14 files changed, 7 insertions(+), 7 deletions(-) rename src/pages/ValidatorOnboarding/{ => Activation}/Activation.stories.ts (100%) rename src/pages/ValidatorOnboarding/{ => Activation}/Activation.tsx (100%) rename src/pages/ValidatorOnboarding/{ => Advicsories}/Advicsories.stories.ts (100%) rename src/pages/ValidatorOnboarding/{ => Advicsories}/Advicsories.tsx (100%) rename src/pages/ValidatorOnboarding/{ => FormStepper}/FormStepper.css (100%) rename src/pages/ValidatorOnboarding/{ => FormStepper}/FormStepper.stories.ts (100%) rename src/pages/ValidatorOnboarding/{ => FormStepper}/FormStepper.tsx (100%) rename src/pages/ValidatorOnboarding/{ => KeyGeneration}/KeyGeneration.stories.ts (100%) rename src/pages/ValidatorOnboarding/{ => KeyGeneration}/KeyGeneration.tsx (100%) rename src/pages/ValidatorOnboarding/{ => Overview}/Overview.stories.ts (100%) rename src/pages/ValidatorOnboarding/{ => Overview}/Overview.tsx (98%) rename src/pages/ValidatorOnboarding/{ => ValidatorSetup}/ValidatorSetup.stories.ts (100%) rename src/pages/ValidatorOnboarding/{ => ValidatorSetup}/ValidatorSetup.tsx (100%) diff --git a/src/pages/ValidatorOnboarding/Activation.stories.ts b/src/pages/ValidatorOnboarding/Activation/Activation.stories.ts similarity index 100% rename from src/pages/ValidatorOnboarding/Activation.stories.ts rename to src/pages/ValidatorOnboarding/Activation/Activation.stories.ts diff --git a/src/pages/ValidatorOnboarding/Activation.tsx b/src/pages/ValidatorOnboarding/Activation/Activation.tsx similarity index 100% rename from src/pages/ValidatorOnboarding/Activation.tsx rename to src/pages/ValidatorOnboarding/Activation/Activation.tsx diff --git a/src/pages/ValidatorOnboarding/Advicsories.stories.ts b/src/pages/ValidatorOnboarding/Advicsories/Advicsories.stories.ts similarity index 100% rename from src/pages/ValidatorOnboarding/Advicsories.stories.ts rename to src/pages/ValidatorOnboarding/Advicsories/Advicsories.stories.ts diff --git a/src/pages/ValidatorOnboarding/Advicsories.tsx b/src/pages/ValidatorOnboarding/Advicsories/Advicsories.tsx similarity index 100% rename from src/pages/ValidatorOnboarding/Advicsories.tsx rename to src/pages/ValidatorOnboarding/Advicsories/Advicsories.tsx diff --git a/src/pages/ValidatorOnboarding/FormStepper.css b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.css similarity index 100% rename from src/pages/ValidatorOnboarding/FormStepper.css rename to src/pages/ValidatorOnboarding/FormStepper/FormStepper.css diff --git a/src/pages/ValidatorOnboarding/FormStepper.stories.ts b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.stories.ts similarity index 100% rename from src/pages/ValidatorOnboarding/FormStepper.stories.ts rename to src/pages/ValidatorOnboarding/FormStepper/FormStepper.stories.ts diff --git a/src/pages/ValidatorOnboarding/FormStepper.tsx b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx similarity index 100% rename from src/pages/ValidatorOnboarding/FormStepper.tsx rename to src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx diff --git a/src/pages/ValidatorOnboarding/KeyGeneration.stories.ts b/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.stories.ts similarity index 100% rename from src/pages/ValidatorOnboarding/KeyGeneration.stories.ts rename to src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.stories.ts diff --git a/src/pages/ValidatorOnboarding/KeyGeneration.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx similarity index 100% rename from src/pages/ValidatorOnboarding/KeyGeneration.tsx rename to src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx diff --git a/src/pages/ValidatorOnboarding/Overview.stories.ts b/src/pages/ValidatorOnboarding/Overview/Overview.stories.ts similarity index 100% rename from src/pages/ValidatorOnboarding/Overview.stories.ts rename to src/pages/ValidatorOnboarding/Overview/Overview.stories.ts diff --git a/src/pages/ValidatorOnboarding/Overview.tsx b/src/pages/ValidatorOnboarding/Overview/Overview.tsx similarity index 98% rename from src/pages/ValidatorOnboarding/Overview.tsx rename to src/pages/ValidatorOnboarding/Overview/Overview.tsx index e4808fa7..70fdf84a 100644 --- a/src/pages/ValidatorOnboarding/Overview.tsx +++ b/src/pages/ValidatorOnboarding/Overview/Overview.tsx @@ -23,7 +23,7 @@ const Overview = () => { Becoming a validator is a big responsibility with important preparation steps. Only start the deposit process when youre ready. - + By running a validator, you'll be responsible for securing the network and receive continuous payouts for actions that help the network reach consensus. diff --git a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx index f603b414..934d6002 100644 --- a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx @@ -1,13 +1,13 @@ import { YStack } from 'tamagui' -import FormStepper from './FormStepper' +import FormStepper from './FormStepper/FormStepper' import PageWrapperGradient from '../../components/PageWrappers/PageWrapperGradient' import Titles from '../../components/General/Titles' import { useState } from 'react' -import Overview from './Overview' -import KeyGeneration from './KeyGeneration' -import Advicsories from './Advicsories' -import ValidatorSetup from './ValidatorSetup' -import Activation from './Activation' +import Overview from './Overview/Overview' +import KeyGeneration from './KeyGeneration/KeyGeneration' +import Advicsories from './Advicsories/Advicsories' +import ValidatorSetup from './ValidatorSetup/ValidatorSetup' +import Activation from './Activation/Activation' const ValidatorOnboarding = () => { const [activeStep, setActiveStep] = useState(0) diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup.stories.ts b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup.stories.ts similarity index 100% rename from src/pages/ValidatorOnboarding/ValidatorSetup.stories.ts rename to src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup.stories.ts diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup.tsx similarity index 100% rename from src/pages/ValidatorOnboarding/ValidatorSetup.tsx rename to src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup.tsx From 7cadce718e2fcdbe46e8281f9d155eaea9751e55 Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Thu, 24 Aug 2023 13:24:10 +0300 Subject: [PATCH 046/357] Implement Advisories --- .../Advicsories/Advicsories.tsx | 50 +++++++++++++++++-- 1 file changed, 47 insertions(+), 3 deletions(-) diff --git a/src/pages/ValidatorOnboarding/Advicsories/Advicsories.tsx b/src/pages/ValidatorOnboarding/Advicsories/Advicsories.tsx index 43d86f2b..9d13436d 100644 --- a/src/pages/ValidatorOnboarding/Advicsories/Advicsories.tsx +++ b/src/pages/ValidatorOnboarding/Advicsories/Advicsories.tsx @@ -1,5 +1,7 @@ -import { Button, Shadow } from '@status-im/components' -import { Stack } from 'tamagui' +import { Button, Shadow, Text } from '@status-im/components' +import { Stack, XStack, YStack } from 'tamagui' +import IconText from '../../../components/General/IconText' +import { Link } from 'react-router-dom' const Advicsories = () => { return ( @@ -12,7 +14,49 @@ const Advicsories = () => { backgroundColor: '#fff', padding: '16px 32px', }} - > + > + + + Advisories + ① Proof of Stake + ② Deposit + ③ Key Management + + ④ Bad Behaviour + + ⑤ Requirements + ⑤ Risks + + + Bad Behaviour + + If you try to cheat the system, or act contrary to the specification, you will be + liable to incur a penalty known as slashing*. Running your validator keys + simultaneously on two or more machines will result in slashing.* Simply being offline + with an otherwise healthy network does not result in slashing, but will result in + small inactivity penalties. + + + + The Ethereum consensus layer specification + + + + + More on slashing risks + + + + + From 9f94dff596799a304d0f7ff2850725c635ff12c0 Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Thu, 24 Aug 2023 13:55:48 +0300 Subject: [PATCH 047/357] Clear code and fix warning --- src/pages/ValidatorOnboarding/Advicsories/Advicsories.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/pages/ValidatorOnboarding/Advicsories/Advicsories.tsx b/src/pages/ValidatorOnboarding/Advicsories/Advicsories.tsx index 9d13436d..b9c69351 100644 --- a/src/pages/ValidatorOnboarding/Advicsories/Advicsories.tsx +++ b/src/pages/ValidatorOnboarding/Advicsories/Advicsories.tsx @@ -1,6 +1,5 @@ import { Button, Shadow, Text } from '@status-im/components' import { Stack, XStack, YStack } from 'tamagui' -import IconText from '../../../components/General/IconText' import { Link } from 'react-router-dom' const Advicsories = () => { @@ -41,8 +40,11 @@ const Advicsories = () => { with an otherwise healthy network does not result in slashing, but will result in small inactivity penalties. - - + + The Ethereum consensus layer specification From 98be86fbb1a7797d780b54324c4582222d5d852f Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Thu, 24 Aug 2023 14:15:55 +0300 Subject: [PATCH 048/357] fix: delete gradient wrapper --- src/components/PageWrappers/PageWrapperGradient.tsx | 12 ------------ 1 file changed, 12 deletions(-) delete mode 100644 src/components/PageWrappers/PageWrapperGradient.tsx diff --git a/src/components/PageWrappers/PageWrapperGradient.tsx b/src/components/PageWrappers/PageWrapperGradient.tsx deleted file mode 100644 index 4d4d1217..00000000 --- a/src/components/PageWrappers/PageWrapperGradient.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { ReactNode } from 'react' -import './layoutGradient.css' - -type PageWrapperGradientProps = { - children: ReactNode -} - -const PageWrapperGradient = ({ children }: PageWrapperGradientProps) => { - return
{children}
-} - -export default PageWrapperGradient From d62ce397914c5bcc602c69335180e19292f3e1fe Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Thu, 24 Aug 2023 14:18:59 +0300 Subject: [PATCH 049/357] fix: move css for gradient --- .../ValidatorOnboarding}/layoutGradient.css | 21 ++++++++++--------- 1 file changed, 11 insertions(+), 10 deletions(-) rename src/{components/PageWrappers => pages/ValidatorOnboarding}/layoutGradient.css (56%) diff --git a/src/components/PageWrappers/layoutGradient.css b/src/pages/ValidatorOnboarding/layoutGradient.css similarity index 56% rename from src/components/PageWrappers/layoutGradient.css rename to src/pages/ValidatorOnboarding/layoutGradient.css index f421ddaa..e971ca41 100644 --- a/src/components/PageWrappers/layoutGradient.css +++ b/src/pages/ValidatorOnboarding/layoutGradient.css @@ -1,17 +1,18 @@ -.gradient-wrapper .image-container::after { - display: block; - content: ""; - position: absolute; - top: 0; - left: -1%; - width: 50%; - height: 100%; - background: linear-gradient(to right, rgba(255, 255, 255, 1) 25%, rgba(255, 255, 255, 0.0)); -} .gradient-wrapper .image-container .background-img { position: absolute; top: 50%; left: 75%; height: 230%; width: auto; +} + +.gradient-wrapper:after { + display: block; + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: linear-gradient(to bottom, rgba(113, 64, 253, 0.075) 15%, rgba(255,255,255,0) 50%); } \ No newline at end of file From dc8fb030c5a08fe222d430f93603d588a4abd388 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Thu, 24 Aug 2023 14:19:26 +0300 Subject: [PATCH 050/357] fix: remove logic for this gradient wrapper from validator --- src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx index 934d6002..fb8ea024 100644 --- a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx @@ -1,6 +1,5 @@ import { YStack } from 'tamagui' import FormStepper from './FormStepper/FormStepper' -import PageWrapperGradient from '../../components/PageWrappers/PageWrapperGradient' import Titles from '../../components/General/Titles' import { useState } from 'react' import Overview from './Overview/Overview' @@ -8,6 +7,7 @@ import KeyGeneration from './KeyGeneration/KeyGeneration' import Advicsories from './Advicsories/Advicsories' import ValidatorSetup from './ValidatorSetup/ValidatorSetup' import Activation from './Activation/Activation' +import './layoutGradient.css' const ValidatorOnboarding = () => { const [activeStep, setActiveStep] = useState(0) @@ -17,7 +17,7 @@ const ValidatorOnboarding = () => { } return ( - +
{ {activeStep === 3 && } {activeStep === 4 && } - +
) } From 3a12bbcde325c313a4bcfc555eb9ad5b65c936a5 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Thu, 24 Aug 2023 14:31:53 +0300 Subject: [PATCH 051/357] fix: overview styling --- .../ValidatorOnboarding/Overview/Overview.tsx | 42 ++++++++----------- .../ValidatorOnboarding.tsx | 2 +- 2 files changed, 19 insertions(+), 25 deletions(-) diff --git a/src/pages/ValidatorOnboarding/Overview/Overview.tsx b/src/pages/ValidatorOnboarding/Overview/Overview.tsx index 70fdf84a..252ffdb0 100644 --- a/src/pages/ValidatorOnboarding/Overview/Overview.tsx +++ b/src/pages/ValidatorOnboarding/Overview/Overview.tsx @@ -14,41 +14,35 @@ const Overview = () => { backgroundColor: '#fff', }} > - - + + Overview - Becoming a validator is a big responsibility with important preparation steps. Only start the deposit process when youre ready. - + By running a validator, you'll be responsible for securing the network and receive continuous payouts for actions that help the network reach consensus. - + Since the successful transition to proof-of-stake via The Merge, Ethereum is fully secured by proof-of-stake validators. By running a validator, you'll be helping to secure the Ethereum network. - - Learn more - - + + + Learn more + + + @@ -64,8 +58,8 @@ const Overview = () => { borderRadius: '16px', border: '1px solid rgba(0, 0, 0, 0.15)', backgroundColor: '#FFF', - width: '305px', - padding: '8px 16px', + width: '45%', + padding: '12px 16px', }} > @@ -79,9 +73,9 @@ const Overview = () => { style={{ borderRadius: '16px', border: '1px solid rgba(0, 0, 0, 0.15)', - width: '305px', + width: '45%', backgroundColor: '#FFF', - padding: '8px 16px', + padding: '12px 16px', }} > @@ -95,9 +89,9 @@ const Overview = () => { style={{ borderRadius: '16px', border: '1px solid rgba(0, 0, 0, 0.15)', - width: '305px', + width: '45%', backgroundColor: '#FFF', - padding: '8px 16px', + padding: '12px 16px', }} > diff --git a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx index fb8ea024..882ed113 100644 --- a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx @@ -22,7 +22,7 @@ const ValidatorOnboarding = () => { style={{ width: '100%', margin: '0 auto', - padding: '2% 10%', + padding: '2% 10% 1%', justifyContent: 'start', alignItems: 'start', }} From 1237781780e4472da31306db8f77ba1f2bbb1c27 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Thu, 24 Aug 2023 14:37:45 +0300 Subject: [PATCH 052/357] feat: create separated overview card --- .../Overview/OverviewCard.tsx | 30 +++++++++++++++++++ 1 file changed, 30 insertions(+) create mode 100644 src/pages/ValidatorOnboarding/Overview/OverviewCard.tsx diff --git a/src/pages/ValidatorOnboarding/Overview/OverviewCard.tsx b/src/pages/ValidatorOnboarding/Overview/OverviewCard.tsx new file mode 100644 index 00000000..ba077e81 --- /dev/null +++ b/src/pages/ValidatorOnboarding/Overview/OverviewCard.tsx @@ -0,0 +1,30 @@ +import { YStack } from 'tamagui' +import { Text } from '@status-im/components' + +type OverviewCardProps = { + text: string + value: string +} + +const OverviewCard = ({ text, value }: OverviewCardProps) => { + return ( + + + {text} + + + {value} + + + ) +} + +export default OverviewCard From 6a3f087d8be5bd8e4eb8d2b4c5ee171f8f69b35f Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Thu, 24 Aug 2023 14:38:43 +0300 Subject: [PATCH 053/357] feat: remove repeated components and use reusable --- .../ValidatorOnboarding/Overview/Overview.tsx | 69 ++----------------- 1 file changed, 5 insertions(+), 64 deletions(-) diff --git a/src/pages/ValidatorOnboarding/Overview/Overview.tsx b/src/pages/ValidatorOnboarding/Overview/Overview.tsx index 252ffdb0..f1833007 100644 --- a/src/pages/ValidatorOnboarding/Overview/Overview.tsx +++ b/src/pages/ValidatorOnboarding/Overview/Overview.tsx @@ -1,6 +1,7 @@ import { Stack, Text as TextTam, XStack, YStack } from 'tamagui' import { Button, Shadow, Text } from '@status-im/components' import { Link } from 'react-router-dom' +import OverviewCard from './OverviewCard' const Overview = () => { return ( @@ -37,70 +38,10 @@ const Overview = () => { - - - Current APR - - - 4.40% - - - - - Total ETH Staked - - - 19,451,123 - - - - - Estimated Activation Time - - - 32 Days - - - - - Validator Queue - - - 92603 - - + + + +
From 10d84f5c6922184987dd47241663e2d68bf11abe Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Thu, 24 Aug 2023 14:54:37 +0300 Subject: [PATCH 054/357] fix: add with router for Advicsories story --- .../ValidatorOnboarding/Advicsories/Advicsories.stories.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/pages/ValidatorOnboarding/Advicsories/Advicsories.stories.ts b/src/pages/ValidatorOnboarding/Advicsories/Advicsories.stories.ts index 53870035..2f41af9e 100644 --- a/src/pages/ValidatorOnboarding/Advicsories/Advicsories.stories.ts +++ b/src/pages/ValidatorOnboarding/Advicsories/Advicsories.stories.ts @@ -1,4 +1,5 @@ import type { Meta, StoryObj } from '@storybook/react' +import { withRouter } from 'storybook-addon-react-router-v6' import Advicsories from './Advicsories' @@ -10,6 +11,7 @@ const meta = { }, tags: ['autodocs'], argTypes: {}, + decorators: [withRouter], } satisfies Meta export default meta From 1283bc88639aa437a306a6d035a4f39dd84eb169 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Thu, 24 Aug 2023 14:59:39 +0300 Subject: [PATCH 055/357] feat: style learn more link --- src/pages/ValidatorOnboarding/Overview/Overview.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/pages/ValidatorOnboarding/Overview/Overview.tsx b/src/pages/ValidatorOnboarding/Overview/Overview.tsx index f1833007..d14d60f2 100644 --- a/src/pages/ValidatorOnboarding/Overview/Overview.tsx +++ b/src/pages/ValidatorOnboarding/Overview/Overview.tsx @@ -2,6 +2,7 @@ import { Stack, Text as TextTam, XStack, YStack } from 'tamagui' import { Button, Shadow, Text } from '@status-im/components' import { Link } from 'react-router-dom' import OverviewCard from './OverviewCard' +import { ArrowRightIcon } from '@status-im/icons' const Overview = () => { return ( @@ -34,7 +35,12 @@ const Overview = () => { - Learn more + + + Learn more + + + From 3305a2c4ae5bde59962e01d4b7c29ded506017a7 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Thu, 24 Aug 2023 15:00:00 +0300 Subject: [PATCH 056/357] fix: update link width to fit content --- src/pages/ValidatorOnboarding/Overview/Overview.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/ValidatorOnboarding/Overview/Overview.tsx b/src/pages/ValidatorOnboarding/Overview/Overview.tsx index d14d60f2..2082cc54 100644 --- a/src/pages/ValidatorOnboarding/Overview/Overview.tsx +++ b/src/pages/ValidatorOnboarding/Overview/Overview.tsx @@ -33,7 +33,7 @@ const Overview = () => { secured by proof-of-stake validators. By running a validator, you'll be helping to secure the Ethereum network. - + From 6a579320382feaf0efc69e1562e4c7002c590634 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Thu, 24 Aug 2023 15:02:28 +0300 Subject: [PATCH 057/357] fix: console error for not valid child of Link --- src/pages/ValidatorOnboarding/Overview/Overview.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/pages/ValidatorOnboarding/Overview/Overview.tsx b/src/pages/ValidatorOnboarding/Overview/Overview.tsx index 2082cc54..c7ada76c 100644 --- a/src/pages/ValidatorOnboarding/Overview/Overview.tsx +++ b/src/pages/ValidatorOnboarding/Overview/Overview.tsx @@ -35,12 +35,12 @@ const Overview = () => { - - + + Learn more - - - + + + From 8cf30474dc2eef26c9ed9607dd4a3d4f6e1a2089 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Thu, 24 Aug 2023 15:04:06 +0300 Subject: [PATCH 058/357] fix: clicking continue button --- src/pages/ValidatorOnboarding/Overview/Overview.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/ValidatorOnboarding/Overview/Overview.tsx b/src/pages/ValidatorOnboarding/Overview/Overview.tsx index c7ada76c..2ba4f448 100644 --- a/src/pages/ValidatorOnboarding/Overview/Overview.tsx +++ b/src/pages/ValidatorOnboarding/Overview/Overview.tsx @@ -60,7 +60,7 @@ const Overview = () => {
- + From e5e72ecf6724727e22d95375a7d3e5372ad58461 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Thu, 24 Aug 2023 15:08:56 +0300 Subject: [PATCH 059/357] fix: remove side scroller --- src/components/PageWrappers/layout.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/PageWrappers/layout.css b/src/components/PageWrappers/layout.css index d1676b63..046fc817 100644 --- a/src/components/PageWrappers/layout.css +++ b/src/components/PageWrappers/layout.css @@ -40,7 +40,7 @@ /* LAYOUT RIGHT ELEMENT WITH IMAGE TAKING UP THE WHOLE HIGHT OF THE VIEWPORT */ .layout-right { - flex: 0 0 45%; + flex: 0 0 44.6%; max-width: 45%; z-index: 0; } From 1fa4552961be6e3276ec8379e45dc1ed7fba8fe7 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Thu, 24 Aug 2023 15:12:10 +0300 Subject: [PATCH 060/357] fix: make overview background white --- src/pages/ValidatorOnboarding/Overview/Overview.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/pages/ValidatorOnboarding/Overview/Overview.tsx b/src/pages/ValidatorOnboarding/Overview/Overview.tsx index 2ba4f448..3e1bd83b 100644 --- a/src/pages/ValidatorOnboarding/Overview/Overview.tsx +++ b/src/pages/ValidatorOnboarding/Overview/Overview.tsx @@ -14,6 +14,7 @@ const Overview = () => { border: 'none', flexDirection: 'row', backgroundColor: '#fff', + zIndex: 999, }} > From 79dbe6eb52b5648dc30a8f9fc297c8821fb2669d Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Thu, 24 Aug 2023 16:15:19 +0300 Subject: [PATCH 061/357] Implement second page logic --- .../Advicsories/Advicsories.tsx | 70 ++++++++++--------- .../Advicsories/AdvisoriesContent.tsx | 31 ++++++++ 2 files changed, 67 insertions(+), 34 deletions(-) create mode 100644 src/pages/ValidatorOnboarding/Advicsories/AdvisoriesContent.tsx diff --git a/src/pages/ValidatorOnboarding/Advicsories/Advicsories.tsx b/src/pages/ValidatorOnboarding/Advicsories/Advicsories.tsx index b9c69351..eca88eaa 100644 --- a/src/pages/ValidatorOnboarding/Advicsories/Advicsories.tsx +++ b/src/pages/ValidatorOnboarding/Advicsories/Advicsories.tsx @@ -1,8 +1,21 @@ import { Button, Shadow, Text } from '@status-im/components' +import { useState } from 'react' import { Stack, XStack, YStack } from 'tamagui' -import { Link } from 'react-router-dom' +import AdvisoriesContent from './AdvisoriesContent' const Advicsories = () => { + const [selectedTitle, setSelectedTitle] = useState('Bad Behaviour') + + const advisoryTopics = { + 'Proof of Stake': 'This is content for Proof of Stake...', + Deposit: 'This is content for Deposit...', + 'Key Management': 'This is content for Key Management...', + 'Bad Behaviour': + 'If you try to cheat the system, or act contrary to the specification, you will be liable to incur a penalty known as slashing*. Running your validator keys simultaneously on two or more machines will result in slashing.* Simply being offline with an otherwise healthy network does not result in slashing, but will result in small inactivity penalties.', + Requirements: 'This is content for Requirements...', + Risks: 'This is content for Risks...', + } + const unicodeNumbers = ['➀', '➁', '➂', '➃', '➄', '➅'] return ( <> { style={{ padding: '16px 32px' }} > - Advisories - ① Proof of Stake - ② Deposit - ③ Key Management - - ④ Bad Behaviour - - ⑤ Requirements - ⑤ Risks + + Advisories + + {Object.keys(advisoryTopics).map((title, index) => ( + setSelectedTitle(title)} + style={{ cursor: 'pointer' }} + > + + {unicodeNumbers[index]} {title} + + + ))} - Bad Behaviour - - If you try to cheat the system, or act contrary to the specification, you will be - liable to incur a penalty known as slashing*. Running your validator keys - simultaneously on two or more machines will result in slashing.* Simply being offline - with an otherwise healthy network does not result in slashing, but will result in - small inactivity penalties. - - - - The Ethereum consensus layer specification - - - - - More on slashing risks - - + diff --git a/src/pages/ValidatorOnboarding/Advicsories/AdvisoriesContent.tsx b/src/pages/ValidatorOnboarding/Advicsories/AdvisoriesContent.tsx new file mode 100644 index 00000000..b6405dd4 --- /dev/null +++ b/src/pages/ValidatorOnboarding/Advicsories/AdvisoriesContent.tsx @@ -0,0 +1,31 @@ +import { Text } from '@status-im/components' +import { Link } from 'react-router-dom' +type AdvisoriesContentProps = { + title: string + content: string +} +const AdvisoriesContent = ({ title, content }: AdvisoriesContentProps) => { + return ( + <> + {title} + {content} + + + The Ethereum consensus layer specification + + + + + More on slashing risks + + + + ) +} +export default AdvisoriesContent From d663fd98694df28d382e52dfcfe95a2d67774432 Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Thu, 24 Aug 2023 16:19:45 +0300 Subject: [PATCH 062/357] Fix warning --- .../Advicsories/Advicsories.tsx | 27 +++++++++++-------- 1 file changed, 16 insertions(+), 11 deletions(-) diff --git a/src/pages/ValidatorOnboarding/Advicsories/Advicsories.tsx b/src/pages/ValidatorOnboarding/Advicsories/Advicsories.tsx index eca88eaa..7359853d 100644 --- a/src/pages/ValidatorOnboarding/Advicsories/Advicsories.tsx +++ b/src/pages/ValidatorOnboarding/Advicsories/Advicsories.tsx @@ -3,19 +3,24 @@ import { useState } from 'react' import { Stack, XStack, YStack } from 'tamagui' import AdvisoriesContent from './AdvisoriesContent' +type AdvisoryTopicsType = { + [key: string]: string +} + +const unicodeNumbers = ['➀', '➁', '➂', '➃', '➄', '➅'] + +const advisoryTopics: AdvisoryTopicsType = { + 'Proof of Stake': 'This is content for Proof of Stake...', + Deposit: 'This is content for Deposit...', + 'Key Management': 'This is content for Key Management...', + 'Bad Behaviour': + 'If you try to cheat the system, or act contrary to the specification, you will be liable to incur a penalty known as slashing*. Running your validator keys simultaneously on two or more machines will result in slashing.* Simply being offline with an otherwise healthy network does not result in slashing, but will result in small inactivity penalties.', + Requirements: 'This is content for Requirements...', + Risks: 'This is content for Risks...', +} + const Advicsories = () => { const [selectedTitle, setSelectedTitle] = useState('Bad Behaviour') - - const advisoryTopics = { - 'Proof of Stake': 'This is content for Proof of Stake...', - Deposit: 'This is content for Deposit...', - 'Key Management': 'This is content for Key Management...', - 'Bad Behaviour': - 'If you try to cheat the system, or act contrary to the specification, you will be liable to incur a penalty known as slashing*. Running your validator keys simultaneously on two or more machines will result in slashing.* Simply being offline with an otherwise healthy network does not result in slashing, but will result in small inactivity penalties.', - Requirements: 'This is content for Requirements...', - Risks: 'This is content for Risks...', - } - const unicodeNumbers = ['➀', '➁', '➂', '➃', '➄', '➅'] return ( <> Date: Fri, 25 Aug 2023 09:13:34 +0300 Subject: [PATCH 063/357] feat: create validator wrapper component --- .../ValidatorBoxWrapper.tsx | 25 +++++++++++++++++++ 1 file changed, 25 insertions(+) create mode 100644 src/pages/ValidatorOnboarding/ValidatorBoxWrapper/ValidatorBoxWrapper.tsx diff --git a/src/pages/ValidatorOnboarding/ValidatorBoxWrapper/ValidatorBoxWrapper.tsx b/src/pages/ValidatorOnboarding/ValidatorBoxWrapper/ValidatorBoxWrapper.tsx new file mode 100644 index 00000000..c6d30a53 --- /dev/null +++ b/src/pages/ValidatorOnboarding/ValidatorBoxWrapper/ValidatorBoxWrapper.tsx @@ -0,0 +1,25 @@ +import { Shadow } from '@status-im/components' +import { ReactNode } from 'react' + +type ValidatorBoxWrapperProps = { + children: ReactNode +} + +const ValidatorBoxWrapper = ({ children }: ValidatorBoxWrapperProps) => { + return ( + + {children} + + ) +} + +export default ValidatorBoxWrapper From b8aaa1e946c32df4ce77d71c79ba6e4409b5d746 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Fri, 25 Aug 2023 09:14:49 +0300 Subject: [PATCH 064/357] feat: add new wrapper to Advicsories --- .../Advicsories/Advicsories.tsx | 16 +++++----------- 1 file changed, 5 insertions(+), 11 deletions(-) diff --git a/src/pages/ValidatorOnboarding/Advicsories/Advicsories.tsx b/src/pages/ValidatorOnboarding/Advicsories/Advicsories.tsx index 7359853d..8bf71b76 100644 --- a/src/pages/ValidatorOnboarding/Advicsories/Advicsories.tsx +++ b/src/pages/ValidatorOnboarding/Advicsories/Advicsories.tsx @@ -1,7 +1,8 @@ -import { Button, Shadow, Text } from '@status-im/components' +import { Button, Text } from '@status-im/components' import { useState } from 'react' import { Stack, XStack, YStack } from 'tamagui' import AdvisoriesContent from './AdvisoriesContent' +import ValidatorBoxWrapper from '../ValidatorBoxWrapper/ValidatorBoxWrapper' type AdvisoryTopicsType = { [key: string]: string @@ -21,17 +22,10 @@ const advisoryTopics: AdvisoryTopicsType = { const Advicsories = () => { const [selectedTitle, setSelectedTitle] = useState('Bad Behaviour') + return ( <> - + { > - + From ddf446f9e948a5962193d5270a906c9ca50b4f38 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Fri, 25 Aug 2023 09:31:48 +0300 Subject: [PATCH 065/357] feat: create story for the validator wrapper --- .../ValidatorBoxWrapper.stories.ts | 22 +++++++++++++++++++ 1 file changed, 22 insertions(+) create mode 100644 src/pages/ValidatorOnboarding/ValidatorBoxWrapper/ValidatorBoxWrapper.stories.ts diff --git a/src/pages/ValidatorOnboarding/ValidatorBoxWrapper/ValidatorBoxWrapper.stories.ts b/src/pages/ValidatorOnboarding/ValidatorBoxWrapper/ValidatorBoxWrapper.stories.ts new file mode 100644 index 00000000..d30ca597 --- /dev/null +++ b/src/pages/ValidatorOnboarding/ValidatorBoxWrapper/ValidatorBoxWrapper.stories.ts @@ -0,0 +1,22 @@ +import type { Meta, StoryObj } from '@storybook/react' + +import ValidatorBoxWrapper from './ValidatorBoxWrapper' + +const meta = { + title: 'ValidatorOnboarding/ValidatorBoxWrapper', + component: ValidatorBoxWrapper, + parameters: { + layout: 'centered', + }, + tags: ['autodocs'], + argTypes: {}, +} satisfies Meta + +export default meta +type Story = StoryObj + +export const Page: Story = { + args: { + children: 'ValidatorBoxWrapper', + }, +} From 77aa0334d344fcc437fbae105dc8b3d2247217fd Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Fri, 25 Aug 2023 09:42:57 +0300 Subject: [PATCH 066/357] Style second page --- .../Advicsories/Advicsories.tsx | 27 ++++++++----------- .../Advicsories/AdvisoriesContent.tsx | 5 ++-- 2 files changed, 14 insertions(+), 18 deletions(-) diff --git a/src/pages/ValidatorOnboarding/Advicsories/Advicsories.tsx b/src/pages/ValidatorOnboarding/Advicsories/Advicsories.tsx index 8bf71b76..95a015c3 100644 --- a/src/pages/ValidatorOnboarding/Advicsories/Advicsories.tsx +++ b/src/pages/ValidatorOnboarding/Advicsories/Advicsories.tsx @@ -22,19 +22,16 @@ const advisoryTopics: AdvisoryTopicsType = { const Advicsories = () => { const [selectedTitle, setSelectedTitle] = useState('Bad Behaviour') - + return ( <> - - - - Advisories + + + + + Advisories + {Object.keys(advisoryTopics).map((title, index) => ( { ))} - - - + diff --git a/src/pages/ValidatorOnboarding/Advicsories/AdvisoriesContent.tsx b/src/pages/ValidatorOnboarding/Advicsories/AdvisoriesContent.tsx index b6405dd4..99620d2e 100644 --- a/src/pages/ValidatorOnboarding/Advicsories/AdvisoriesContent.tsx +++ b/src/pages/ValidatorOnboarding/Advicsories/AdvisoriesContent.tsx @@ -1,12 +1,13 @@ import { Text } from '@status-im/components' import { Link } from 'react-router-dom' +import { YStack } from 'tamagui' type AdvisoriesContentProps = { title: string content: string } const AdvisoriesContent = ({ title, content }: AdvisoriesContentProps) => { return ( - <> + {title} {content} @@ -25,7 +26,7 @@ const AdvisoriesContent = ({ title, content }: AdvisoriesContentProps) => { More on slashing risks - + ) } export default AdvisoriesContent From f71d73c96a4ce6b548296bd37b7662bc147c716a Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Fri, 25 Aug 2023 09:52:27 +0300 Subject: [PATCH 067/357] feat: use new wrapper to every validator state page --- src/components/PageWrappers/layout.css | 2 +- .../Activation/Activation.tsx | 17 ++++++----------- .../KeyGeneration/KeyGeneration.tsx | 17 ++++++----------- .../ValidatorOnboarding/Overview/Overview.tsx | 16 ++++------------ .../ValidatorSetup/ValidatorSetup.tsx | 17 ++++++----------- 5 files changed, 23 insertions(+), 46 deletions(-) diff --git a/src/components/PageWrappers/layout.css b/src/components/PageWrappers/layout.css index 046fc817..d1676b63 100644 --- a/src/components/PageWrappers/layout.css +++ b/src/components/PageWrappers/layout.css @@ -40,7 +40,7 @@ /* LAYOUT RIGHT ELEMENT WITH IMAGE TAKING UP THE WHOLE HIGHT OF THE VIEWPORT */ .layout-right { - flex: 0 0 44.6%; + flex: 0 0 45%; max-width: 45%; z-index: 0; } diff --git a/src/pages/ValidatorOnboarding/Activation/Activation.tsx b/src/pages/ValidatorOnboarding/Activation/Activation.tsx index 39175d93..4b51b17f 100644 --- a/src/pages/ValidatorOnboarding/Activation/Activation.tsx +++ b/src/pages/ValidatorOnboarding/Activation/Activation.tsx @@ -1,18 +1,13 @@ -import { Button, Shadow } from '@status-im/components' -import { Stack } from 'tamagui' +import { Button } from '@status-im/components' +import { Stack, YStack } from 'tamagui' +import ValidatorBoxWrapper from '../ValidatorBoxWrapper/ValidatorBoxWrapper' const Activation = () => { return ( <> - + + + diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx index fe88cae0..902c379e 100644 --- a/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx +++ b/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx @@ -1,18 +1,13 @@ -import { Button, Shadow } from '@status-im/components' -import { Stack } from 'tamagui' +import { Button } from '@status-im/components' +import { Stack, YStack } from 'tamagui' +import ValidatorBoxWrapper from '../ValidatorBoxWrapper/ValidatorBoxWrapper' const KeyGeneration = () => { return ( <> - + + + diff --git a/src/pages/ValidatorOnboarding/Overview/Overview.tsx b/src/pages/ValidatorOnboarding/Overview/Overview.tsx index 3e1bd83b..131e5bd6 100644 --- a/src/pages/ValidatorOnboarding/Overview/Overview.tsx +++ b/src/pages/ValidatorOnboarding/Overview/Overview.tsx @@ -1,22 +1,14 @@ import { Stack, Text as TextTam, XStack, YStack } from 'tamagui' -import { Button, Shadow, Text } from '@status-im/components' +import { Button, Text } from '@status-im/components' import { Link } from 'react-router-dom' import OverviewCard from './OverviewCard' import { ArrowRightIcon } from '@status-im/icons' +import ValidatorBoxWrapper from '../ValidatorBoxWrapper/ValidatorBoxWrapper' const Overview = () => { return ( <> - + Overview @@ -60,7 +52,7 @@ const Overview = () => { /> - + diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup.tsx index 167c62b8..9c2ebdc1 100644 --- a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup.tsx @@ -1,18 +1,13 @@ -import { Button, Shadow } from '@status-im/components' -import { Stack } from 'tamagui' +import { Button } from '@status-im/components' +import { Stack, YStack } from 'tamagui' +import ValidatorBoxWrapper from '../ValidatorBoxWrapper/ValidatorBoxWrapper' const ValidatorSetup = () => { return ( <> - + + + From f63d9c5798114037f14e04aa276ae77202c3602c Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Fri, 25 Aug 2023 10:00:26 +0300 Subject: [PATCH 068/357] feat: move components to be abstract --- .../ValidatorOnboarding.tsx | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) diff --git a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx index 882ed113..2d09761e 100644 --- a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx @@ -1,4 +1,4 @@ -import { YStack } from 'tamagui' +import { Stack, YStack } from 'tamagui' import FormStepper from './FormStepper/FormStepper' import Titles from '../../components/General/Titles' import { useState } from 'react' @@ -8,6 +8,8 @@ import Advicsories from './Advicsories/Advicsories' import ValidatorSetup from './ValidatorSetup/ValidatorSetup' import Activation from './Activation/Activation' import './layoutGradient.css' +import ValidatorBoxWrapper from './ValidatorBoxWrapper/ValidatorBoxWrapper' +import { Button } from '@status-im/components' const ValidatorOnboarding = () => { const [activeStep, setActiveStep] = useState(0) @@ -33,11 +35,16 @@ const ValidatorOnboarding = () => { subtitle="Earn Rewards for securing the Ethereum Network" /> - {activeStep === 0 && } - {activeStep === 1 && } - {activeStep === 2 && } - {activeStep === 3 && } - {activeStep === 4 && } + + {activeStep === 0 && } + {activeStep === 1 && } + {activeStep === 2 && } + {activeStep === 3 && } + {activeStep === 4 && } + + + + ) From ab17c39a821254662dab191e62d59eac96c447b9 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Fri, 25 Aug 2023 10:02:30 +0300 Subject: [PATCH 069/357] feat: remove not used components from Advicsories --- .../Advicsories/Advicsories.tsx | 74 ++++++++----------- 1 file changed, 31 insertions(+), 43 deletions(-) diff --git a/src/pages/ValidatorOnboarding/Advicsories/Advicsories.tsx b/src/pages/ValidatorOnboarding/Advicsories/Advicsories.tsx index 8bf71b76..441efdf2 100644 --- a/src/pages/ValidatorOnboarding/Advicsories/Advicsories.tsx +++ b/src/pages/ValidatorOnboarding/Advicsories/Advicsories.tsx @@ -1,8 +1,7 @@ -import { Button, Text } from '@status-im/components' +import { Text } from '@status-im/components' import { useState } from 'react' import { Stack, XStack, YStack } from 'tamagui' import AdvisoriesContent from './AdvisoriesContent' -import ValidatorBoxWrapper from '../ValidatorBoxWrapper/ValidatorBoxWrapper' type AdvisoryTopicsType = { [key: string]: string @@ -22,48 +21,37 @@ const advisoryTopics: AdvisoryTopicsType = { const Advicsories = () => { const [selectedTitle, setSelectedTitle] = useState('Bad Behaviour') - + return ( - <> - - - - - Advisories - - {Object.keys(advisoryTopics).map((title, index) => ( - setSelectedTitle(title)} - style={{ cursor: 'pointer' }} - > - - {unicodeNumbers[index]} {title} - - - ))} - - - - - - - - - - + + + + Advisories + + {Object.keys(advisoryTopics).map((title, index) => ( + setSelectedTitle(title)} style={{ cursor: 'pointer' }}> + + {unicodeNumbers[index]} {title} + + + ))} + + + + + ) } From 0b51bd6535bc4106b33200331619d4f935fd56bb Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Fri, 25 Aug 2023 10:15:37 +0300 Subject: [PATCH 070/357] feat: add handler for continue button --- .../ValidatorOnboarding/Overview/Overview.tsx | 92 +++++++++---------- 1 file changed, 43 insertions(+), 49 deletions(-) diff --git a/src/pages/ValidatorOnboarding/Overview/Overview.tsx b/src/pages/ValidatorOnboarding/Overview/Overview.tsx index 131e5bd6..3f44b4f2 100644 --- a/src/pages/ValidatorOnboarding/Overview/Overview.tsx +++ b/src/pages/ValidatorOnboarding/Overview/Overview.tsx @@ -1,61 +1,55 @@ import { Stack, Text as TextTam, XStack, YStack } from 'tamagui' -import { Button, Text } from '@status-im/components' +import { Text } from '@status-im/components' import { Link } from 'react-router-dom' import OverviewCard from './OverviewCard' import { ArrowRightIcon } from '@status-im/icons' -import ValidatorBoxWrapper from '../ValidatorBoxWrapper/ValidatorBoxWrapper' const Overview = () => { return ( <> - - - - Overview - - - Becoming a validator is a big responsibility with important preparation steps. Only - start the deposit process when youre ready. + + + Overview + + + Becoming a validator is a big responsibility with important preparation steps. Only start + the deposit process when youre ready. + + + By running a validator, you'll be responsible for securing the network and receive + continuous payouts for actions that help the network reach consensus. + + + Since the successful transition to proof-of-stake via The Merge, Ethereum is fully secured + by proof-of-stake validators. By running a validator, you'll be helping to secure the + Ethereum network. + + + + + + Learn more + + + - - By running a validator, you'll be responsible for securing the network and receive - continuous payouts for actions that help the network reach consensus. - - - Since the successful transition to proof-of-stake via The Merge, Ethereum is fully - secured by proof-of-stake validators. By running a validator, you'll be helping to - secure the Ethereum network. - - - - - - Learn more - - - - - - - - - - - - -
-
- background -
-
- - - - + + + + + + + + +
+
+ background +
+
) } From 260f23c714961d7003ba0c165e67a029b023099e Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Fri, 25 Aug 2023 10:25:26 +0300 Subject: [PATCH 071/357] feat: add logic to continue for the last step --- .../ValidatorOnboarding/ValidatorOnboarding.tsx | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx index 2d09761e..21b6e7b2 100644 --- a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx @@ -10,14 +10,24 @@ import Activation from './Activation/Activation' import './layoutGradient.css' import ValidatorBoxWrapper from './ValidatorBoxWrapper/ValidatorBoxWrapper' import { Button } from '@status-im/components' +import { useNavigate } from 'react-router-dom' const ValidatorOnboarding = () => { const [activeStep, setActiveStep] = useState(0) + const navigate = useNavigate() const changeActiveStep = (step: number) => { setActiveStep(step) } + const continueHandler = () => { + if (activeStep < 4) { + setActiveStep(activeStep + 1) + } else { + navigate('/') + } + } + return (
{ {activeStep === 4 && } - +
From 68d1d3924f219b03541e451e8ed14d8484a2e385 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Fri, 25 Aug 2023 10:51:47 +0300 Subject: [PATCH 072/357] feat: remove unusable components remove old parts from components after make one abstract in the parent --- .../ValidatorOnboarding/Activation/Activation.tsx | 15 ++------------- .../KeyGeneration/KeyGeneration.tsx | 15 ++------------- .../ValidatorSetup/ValidatorSetup.tsx | 15 ++------------- 3 files changed, 6 insertions(+), 39 deletions(-) diff --git a/src/pages/ValidatorOnboarding/Activation/Activation.tsx b/src/pages/ValidatorOnboarding/Activation/Activation.tsx index 4b51b17f..264e33ba 100644 --- a/src/pages/ValidatorOnboarding/Activation/Activation.tsx +++ b/src/pages/ValidatorOnboarding/Activation/Activation.tsx @@ -1,18 +1,7 @@ -import { Button } from '@status-im/components' -import { Stack, YStack } from 'tamagui' -import ValidatorBoxWrapper from '../ValidatorBoxWrapper/ValidatorBoxWrapper' +import { YStack } from 'tamagui' const Activation = () => { - return ( - <> - - - - - - - - ) + return } export default Activation diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx index 902c379e..9a9a96d9 100644 --- a/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx +++ b/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx @@ -1,18 +1,7 @@ -import { Button } from '@status-im/components' -import { Stack, YStack } from 'tamagui' -import ValidatorBoxWrapper from '../ValidatorBoxWrapper/ValidatorBoxWrapper' +import { YStack } from 'tamagui' const KeyGeneration = () => { - return ( - <> - - - - - - - - ) + return } export default KeyGeneration diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup.tsx index 9c2ebdc1..a82c74c2 100644 --- a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup.tsx @@ -1,18 +1,7 @@ -import { Button } from '@status-im/components' -import { Stack, YStack } from 'tamagui' -import ValidatorBoxWrapper from '../ValidatorBoxWrapper/ValidatorBoxWrapper' +import { YStack } from 'tamagui' const ValidatorSetup = () => { - return ( - <> - - - - - - - - ) + return } export default ValidatorSetup From 93405155044db337471abb37b8ea4d087bfb72eb Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Fri, 25 Aug 2023 11:05:39 +0300 Subject: [PATCH 073/357] feat: add padding to the abstract wrapper --- src/pages/ValidatorOnboarding/Overview/Overview.tsx | 2 +- .../ValidatorBoxWrapper/ValidatorBoxWrapper.tsx | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/pages/ValidatorOnboarding/Overview/Overview.tsx b/src/pages/ValidatorOnboarding/Overview/Overview.tsx index 3f44b4f2..b107b2af 100644 --- a/src/pages/ValidatorOnboarding/Overview/Overview.tsx +++ b/src/pages/ValidatorOnboarding/Overview/Overview.tsx @@ -7,7 +7,7 @@ import { ArrowRightIcon } from '@status-im/icons' const Overview = () => { return ( <> - + Overview diff --git a/src/pages/ValidatorOnboarding/ValidatorBoxWrapper/ValidatorBoxWrapper.tsx b/src/pages/ValidatorOnboarding/ValidatorBoxWrapper/ValidatorBoxWrapper.tsx index c6d30a53..83797d66 100644 --- a/src/pages/ValidatorOnboarding/ValidatorBoxWrapper/ValidatorBoxWrapper.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorBoxWrapper/ValidatorBoxWrapper.tsx @@ -15,6 +15,7 @@ const ValidatorBoxWrapper = ({ children }: ValidatorBoxWrapperProps) => { flexDirection: 'row', backgroundColor: '#fff', zIndex: 999, + padding: '16px 32px', }} > {children} From 03416f47f2e537f2b7bd1e96ca1f53c7cc14541c Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Fri, 25 Aug 2023 11:23:15 +0300 Subject: [PATCH 074/357] Fix style --- .../Advicsories/Advicsories.tsx | 25 ++++++++----------- 1 file changed, 10 insertions(+), 15 deletions(-) diff --git a/src/pages/ValidatorOnboarding/Advicsories/Advicsories.tsx b/src/pages/ValidatorOnboarding/Advicsories/Advicsories.tsx index 441efdf2..d4dfde04 100644 --- a/src/pages/ValidatorOnboarding/Advicsories/Advicsories.tsx +++ b/src/pages/ValidatorOnboarding/Advicsories/Advicsories.tsx @@ -23,15 +23,12 @@ const Advicsories = () => { const [selectedTitle, setSelectedTitle] = useState('Bad Behaviour') return ( - - - - Advisories + + + + + Advisories + {Object.keys(advisoryTopics).map((title, index) => ( setSelectedTitle(title)} style={{ cursor: 'pointer' }}> @@ -45,12 +42,10 @@ const Advicsories = () => { ))} - - - + ) } From d25d133604fd1af8c4d5a2a0eeef864890f78a88 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Fri, 25 Aug 2023 11:27:05 +0300 Subject: [PATCH 075/357] feat: create header for key generation --- .../KeyGeneration/KeyGeneration.tsx | 7 ++++++- .../KeyGeneration/KeyGenerationHeader.tsx | 19 +++++++++++++++++++ 2 files changed, 25 insertions(+), 1 deletion(-) create mode 100644 src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationHeader.tsx diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx index 9a9a96d9..69416dd2 100644 --- a/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx +++ b/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx @@ -1,7 +1,12 @@ import { YStack } from 'tamagui' +import KeyGenerationHeader from './KeyGenerationHeader' const KeyGeneration = () => { - return + return ( + + + + ) } export default KeyGeneration diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationHeader.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationHeader.tsx new file mode 100644 index 00000000..53e98df9 --- /dev/null +++ b/src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationHeader.tsx @@ -0,0 +1,19 @@ +import { Text } from '@status-im/components' +import { XStack } from 'tamagui' +import SyncCard from './SyncCard' + +const KeyGenerationHeader = () => { + return ( + + + Key Generation + + + + + + + ) +} + +export default KeyGenerationHeader From b8cc418ab59c7dfd2454a99a7bc3641a9fc5975f Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Fri, 25 Aug 2023 11:34:28 +0300 Subject: [PATCH 076/357] feat: add 100% width to the wrapper --- .../ValidatorBoxWrapper/ValidatorBoxWrapper.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/pages/ValidatorOnboarding/ValidatorBoxWrapper/ValidatorBoxWrapper.tsx b/src/pages/ValidatorOnboarding/ValidatorBoxWrapper/ValidatorBoxWrapper.tsx index 83797d66..fc94da7d 100644 --- a/src/pages/ValidatorOnboarding/ValidatorBoxWrapper/ValidatorBoxWrapper.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorBoxWrapper/ValidatorBoxWrapper.tsx @@ -16,6 +16,7 @@ const ValidatorBoxWrapper = ({ children }: ValidatorBoxWrapperProps) => { backgroundColor: '#fff', zIndex: 999, padding: '16px 32px', + width: '100%', }} > {children} From ea6cfcb3a0c8277521ca26a51ed582a56244ce98 Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Fri, 25 Aug 2023 11:42:25 +0300 Subject: [PATCH 077/357] Update content dynamically --- .../Advicsories/Advicsories.tsx | 29 +++++++---- .../Advicsories/AdvisoriesContent.tsx | 51 +++++++++++-------- .../KeyGeneration/KeyGenerationHeader.tsx | 6 +-- 3 files changed, 52 insertions(+), 34 deletions(-) diff --git a/src/pages/ValidatorOnboarding/Advicsories/Advicsories.tsx b/src/pages/ValidatorOnboarding/Advicsories/Advicsories.tsx index d4dfde04..27c5db37 100644 --- a/src/pages/ValidatorOnboarding/Advicsories/Advicsories.tsx +++ b/src/pages/ValidatorOnboarding/Advicsories/Advicsories.tsx @@ -4,27 +4,36 @@ import { Stack, XStack, YStack } from 'tamagui' import AdvisoriesContent from './AdvisoriesContent' type AdvisoryTopicsType = { - [key: string]: string + [key: string]: string[] } const unicodeNumbers = ['➀', '➁', '➂', '➃', '➄', '➅'] const advisoryTopics: AdvisoryTopicsType = { - 'Proof of Stake': 'This is content for Proof of Stake...', - Deposit: 'This is content for Deposit...', - 'Key Management': 'This is content for Key Management...', - 'Bad Behaviour': - 'If you try to cheat the system, or act contrary to the specification, you will be liable to incur a penalty known as slashing*. Running your validator keys simultaneously on two or more machines will result in slashing.* Simply being offline with an otherwise healthy network does not result in slashing, but will result in small inactivity penalties.', - Requirements: 'This is content for Requirements...', - Risks: 'This is content for Risks...', + 'Proof of Stake': ['This is content for Proof of Stake...'], + Deposit: ['This is content for Deposit...'], + 'Key Management': ['This is content for Key Management...'], + 'Bad Behaviour': [ + 'If you try to cheat the system, or act contrary to the specification, you will be liable to incur a penalty known as slashing.', + 'Running your validator keys simultaneously on two or more machines will result in slashing.', + 'Simply being offline with an otherwise healthy network does not result in slashing, but will result in small inactivity penalties.', + ], + Requirements: ['This is content for Requirements...'], + Risks: ['This is content for Risks...'], } const Advicsories = () => { const [selectedTitle, setSelectedTitle] = useState('Bad Behaviour') return ( - - + + Advisories diff --git a/src/pages/ValidatorOnboarding/Advicsories/AdvisoriesContent.tsx b/src/pages/ValidatorOnboarding/Advicsories/AdvisoriesContent.tsx index 99620d2e..6faeca20 100644 --- a/src/pages/ValidatorOnboarding/Advicsories/AdvisoriesContent.tsx +++ b/src/pages/ValidatorOnboarding/Advicsories/AdvisoriesContent.tsx @@ -1,31 +1,40 @@ import { Text } from '@status-im/components' import { Link } from 'react-router-dom' -import { YStack } from 'tamagui' +import { Stack, YStack } from 'tamagui' type AdvisoriesContentProps = { title: string - content: string + content: string[] } const AdvisoriesContent = ({ title, content }: AdvisoriesContentProps) => { return ( - - {title} - {content} - - - The Ethereum consensus layer specification - - - - - More on slashing risks - - + + + + {title} + + + + {content.length && + content.map(row => { + return {row} + })} + + + The Ethereum consensus layer specification + + + + + More on slashing risks + + + ) } diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationHeader.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationHeader.tsx index 53e98df9..6e15f796 100644 --- a/src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationHeader.tsx +++ b/src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationHeader.tsx @@ -1,6 +1,6 @@ import { Text } from '@status-im/components' import { XStack } from 'tamagui' -import SyncCard from './SyncCard' +// import SyncCard from './SyncCard' const KeyGenerationHeader = () => { return ( @@ -9,8 +9,8 @@ const KeyGenerationHeader = () => { Key Generation - - + {/* + */} ) From 7eb1307a44a8b74d802a61bfcb16eb49802eef5e Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Fri, 25 Aug 2023 11:42:55 +0300 Subject: [PATCH 078/357] Add made up texts --- .../Advicsories/Advicsories.tsx | 33 +++++++++++++++---- 1 file changed, 26 insertions(+), 7 deletions(-) diff --git a/src/pages/ValidatorOnboarding/Advicsories/Advicsories.tsx b/src/pages/ValidatorOnboarding/Advicsories/Advicsories.tsx index 27c5db37..747ec864 100644 --- a/src/pages/ValidatorOnboarding/Advicsories/Advicsories.tsx +++ b/src/pages/ValidatorOnboarding/Advicsories/Advicsories.tsx @@ -10,18 +10,37 @@ type AdvisoryTopicsType = { const unicodeNumbers = ['➀', '➁', '➂', '➃', '➄', '➅'] const advisoryTopics: AdvisoryTopicsType = { - 'Proof of Stake': ['This is content for Proof of Stake...'], - Deposit: ['This is content for Deposit...'], - 'Key Management': ['This is content for Key Management...'], + 'Proof of Stake': [ + 'Proof of Stake systems require validators to hold and lock up a certain amount of cryptocurrency to participate.', + 'In Proof of Stake, the chances of creating a block is proportional to the amount of cryptocurrency held.', + 'Unlike Proof of Work, Proof of Stake aims to achieve consensus without intensive computational work.' + ], + Deposit: [ + 'Deposits are often irreversible, so ensure to double-check transaction details before confirming.', + 'Delay in deposit acknowledgment might be due to network congestion or node synchronization.', + 'Always keep transaction IDs or hashes for records and future references in case of disputes.' + ], + 'Key Management': [ + 'Storing your private keys on a device connected to the internet is susceptible to hacks and malware.', + 'Hardware wallets provide an added layer of security by keeping private keys isolated from online systems.', + 'Regularly back up and encrypt your key management solutions to prevent potential losses.' + ], 'Bad Behaviour': [ 'If you try to cheat the system, or act contrary to the specification, you will be liable to incur a penalty known as slashing.', 'Running your validator keys simultaneously on two or more machines will result in slashing.', - 'Simply being offline with an otherwise healthy network does not result in slashing, but will result in small inactivity penalties.', + 'Simply being offline with an otherwise healthy network does not result in slashing, but will result in small inactivity penalties.' + ], + Requirements: [ + 'Ensure your system meets the minimum software and hardware requirements before initiating any operations.', + 'Staying updated with the latest versions is vital to maintain system integrity and performance.', + 'Failure to meet requirements might result in operational inefficiencies or security vulnerabilities.' + ], + Risks: [ + 'Cryptocurrency investments are subject to high volatility and can result in both significant gains and losses.', + 'Always do thorough research before making investment decisions or engaging in transactions.', + 'Be wary of phishing scams, malicious software, and too-good-to-be-true offers.' ], - Requirements: ['This is content for Requirements...'], - Risks: ['This is content for Risks...'], } - const Advicsories = () => { const [selectedTitle, setSelectedTitle] = useState('Bad Behaviour') From 4a5159bb66910c284a1fbb0ac28c20d95ddcdb2f Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Fri, 25 Aug 2023 11:58:23 +0300 Subject: [PATCH 079/357] feat: create sync card for key generation header --- .../KeyGeneration/SyncCard.tsx | 57 +++++++++++++++++++ 1 file changed, 57 insertions(+) create mode 100644 src/pages/ValidatorOnboarding/KeyGeneration/SyncCard.tsx diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/SyncCard.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/SyncCard.tsx new file mode 100644 index 00000000..ce399e64 --- /dev/null +++ b/src/pages/ValidatorOnboarding/KeyGeneration/SyncCard.tsx @@ -0,0 +1,57 @@ +import { Stack, XStack, YStack } from 'tamagui' +import StandardGauge from '../../../components/Charts/StandardGauge' +import { ClearIcon } from '@status-im/icons' +import { Text } from '@status-im/components' + +type SyncCardProps = { + synced: number + total: number + title: string +} + +const SyncCard = ({ synced, total, title }: SyncCardProps) => { + const data = () => { + return [ + { + id: 'storage', + label: 'Used', + value: synced, + color: '#2a4af5', + }, + { + id: 'storage', + label: 'Free', + value: total - synced || 1, + color: '#E7EAEE', + }, + ] + } + + return ( + + + + + + + {title} + + + {synced} / {total} + + + + + ) +} + +export default SyncCard From 1ce402491d93ec5bed1a21f799f702772c1f8bf2 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Fri, 25 Aug 2023 12:24:43 +0300 Subject: [PATCH 080/357] feat: add cards and styling --- .../ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx | 2 +- .../KeyGeneration/KeyGenerationHeader.tsx | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx index 69416dd2..f13885a1 100644 --- a/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx +++ b/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx @@ -3,7 +3,7 @@ import KeyGenerationHeader from './KeyGenerationHeader' const KeyGeneration = () => { return ( - + ) diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationHeader.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationHeader.tsx index 6e15f796..c38e5226 100644 --- a/src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationHeader.tsx +++ b/src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationHeader.tsx @@ -1,16 +1,16 @@ import { Text } from '@status-im/components' import { XStack } from 'tamagui' -// import SyncCard from './SyncCard' +import SyncCard from './SyncCard' const KeyGenerationHeader = () => { return ( - + Key Generation - {/* - */} + + ) From c43a28191dd82c21cf236639c2ac294fd4d768b6 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Fri, 25 Aug 2023 12:40:49 +0300 Subject: [PATCH 081/357] feat: create story for key generation header --- .../KeyGenerationHeader.stories.ts | 20 +++++++++++++++++++ 1 file changed, 20 insertions(+) create mode 100644 src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationHeader.stories.ts diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationHeader.stories.ts b/src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationHeader.stories.ts new file mode 100644 index 00000000..1cf1fe8e --- /dev/null +++ b/src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationHeader.stories.ts @@ -0,0 +1,20 @@ +import type { Meta, StoryObj } from '@storybook/react' + +import KeyGenerationHeader from './KeyGenerationHeader' + +const meta = { + title: 'ValidatorOnboarding/KeyGenerationHeader', + component: KeyGenerationHeader, + parameters: { + layout: 'centered', + }, + tags: ['autodocs'], + argTypes: {}, +} satisfies Meta + +export default meta +type Story = StoryObj + +export const Page: Story = { + args: {}, +} From 9b4fb7f1bb6833f208f7ee68159eb887042a9cc6 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Fri, 25 Aug 2023 12:49:00 +0300 Subject: [PATCH 082/357] feat: create story for sync card --- .../KeyGeneration/SyncCard.stories.ts | 24 +++++++++++++++++++ 1 file changed, 24 insertions(+) create mode 100644 src/pages/ValidatorOnboarding/KeyGeneration/SyncCard.stories.ts diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/SyncCard.stories.ts b/src/pages/ValidatorOnboarding/KeyGeneration/SyncCard.stories.ts new file mode 100644 index 00000000..0cfc8197 --- /dev/null +++ b/src/pages/ValidatorOnboarding/KeyGeneration/SyncCard.stories.ts @@ -0,0 +1,24 @@ +import type { Meta, StoryObj } from '@storybook/react' + +import SyncCard from './SyncCard' + +const meta = { + title: 'ValidatorOnboarding/SyncCard', + component: SyncCard, + parameters: { + layout: 'centered', + }, + tags: ['autodocs'], + argTypes: {}, +} satisfies Meta + +export default meta +type Story = StoryObj + +export const Page: Story = { + args: { + synced: 123.524, + total: 172.503, + title: 'Execution Sync Status', + }, +} From 36ae2b674e8fd9a4581f1172b0824e567b0a5f8f Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Fri, 25 Aug 2023 12:56:03 +0300 Subject: [PATCH 083/357] Create chip for device --- .../ValidatorSetup/PairedDeviceCard.tsx | 34 +++++++++++++++++++ .../ValidatorSetup/ValidatorSetup.tsx | 7 +++- 2 files changed, 40 insertions(+), 1 deletion(-) create mode 100644 src/pages/ValidatorOnboarding/ValidatorSetup/PairedDeviceCard.tsx diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/PairedDeviceCard.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/PairedDeviceCard.tsx new file mode 100644 index 00000000..c09cf29b --- /dev/null +++ b/src/pages/ValidatorOnboarding/ValidatorSetup/PairedDeviceCard.tsx @@ -0,0 +1,34 @@ +// make func component for this file + +import { XStack, YStack } from 'tamagui' +import { CloseCircleIcon } from '@status-im/icons' +import { Avatar, Text } from '@status-im/components' + +const PairedDeviceCard = () => { + return ( + + + + + + + Paired Device + + + Stake & Chips + + + + + + ) +} +export default PairedDeviceCard diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup.tsx index a82c74c2..b8298217 100644 --- a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup.tsx @@ -1,7 +1,12 @@ import { YStack } from 'tamagui' +import PairedDeviceCard from './PairedDeviceCard' const ValidatorSetup = () => { - return + return ( + + + + ) } export default ValidatorSetup From e76bf01361158c7a5d38e8d5ddf9bf171b6ba7b0 Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Fri, 25 Aug 2023 12:59:42 +0300 Subject: [PATCH 084/357] Add header of page --- .../ValidatorSetup/ValidatorSetup.tsx | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup.tsx index b8298217..b9c47a43 100644 --- a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup.tsx @@ -1,10 +1,17 @@ import { YStack } from 'tamagui' import PairedDeviceCard from './PairedDeviceCard' +import { XStack } from 'tamagui' +import { Text } from '@status-im/components' const ValidatorSetup = () => { return ( - - + + + + Validator Setup + + + ) } From df45456adc6c2fda771638e6c8cfcde713a35d50 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Fri, 25 Aug 2023 13:41:13 +0300 Subject: [PATCH 085/357] feat: add title for key generation --- .../KeyGeneration/KeyGenerationTitle.tsx | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationTitle.tsx diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationTitle.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationTitle.tsx new file mode 100644 index 00000000..c8c02cab --- /dev/null +++ b/src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationTitle.tsx @@ -0,0 +1,11 @@ +import { Text } from '@status-im/components' + +const KeyGenerationTitle = () => { + return ( + + Key Generation + + ) +} + +export default KeyGenerationTitle From 2c68f29335db04654bb3c24d83c64ddae06194ce Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Fri, 25 Aug 2023 13:50:41 +0300 Subject: [PATCH 086/357] feat: create story for the title and use the title --- .../KeyGeneration/KeyGenerationHeader.tsx | 6 ++---- .../KeyGenerationTitle.stories.ts | 20 +++++++++++++++++++ 2 files changed, 22 insertions(+), 4 deletions(-) create mode 100644 src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationTitle.stories.ts diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationHeader.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationHeader.tsx index c38e5226..886528f3 100644 --- a/src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationHeader.tsx +++ b/src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationHeader.tsx @@ -1,13 +1,11 @@ -import { Text } from '@status-im/components' import { XStack } from 'tamagui' import SyncCard from './SyncCard' +import KeyGenerationTitle from './KeyGenerationTitle' const KeyGenerationHeader = () => { return ( - - Key Generation - + diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationTitle.stories.ts b/src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationTitle.stories.ts new file mode 100644 index 00000000..b7da7215 --- /dev/null +++ b/src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationTitle.stories.ts @@ -0,0 +1,20 @@ +import type { Meta, StoryObj } from '@storybook/react' + +import KeyGenerationTitle from './KeyGenerationTitle' + +const meta = { + title: 'ValidatorOnboarding/KeyGenerationTitle', + component: KeyGenerationTitle, + parameters: { + layout: 'centered', + }, + tags: ['autodocs'], + argTypes: {}, +} satisfies Meta + +export default meta +type Story = StoryObj + +export const Page: Story = { + args: {}, +} From 323e0a416951707480f94bad901a6c9e3171ab9f Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Fri, 25 Aug 2023 14:11:59 +0300 Subject: [PATCH 087/357] feat: add individual padding to every state page --- src/pages/ValidatorOnboarding/Activation/Activation.tsx | 2 +- src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx | 2 +- src/pages/ValidatorOnboarding/Overview/Overview.tsx | 2 +- .../ValidatorBoxWrapper/ValidatorBoxWrapper.tsx | 1 - src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup.tsx | 2 +- 5 files changed, 4 insertions(+), 5 deletions(-) diff --git a/src/pages/ValidatorOnboarding/Activation/Activation.tsx b/src/pages/ValidatorOnboarding/Activation/Activation.tsx index 264e33ba..ac053936 100644 --- a/src/pages/ValidatorOnboarding/Activation/Activation.tsx +++ b/src/pages/ValidatorOnboarding/Activation/Activation.tsx @@ -1,7 +1,7 @@ import { YStack } from 'tamagui' const Activation = () => { - return + return } export default Activation diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx index f13885a1..aa4f43d6 100644 --- a/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx +++ b/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx @@ -3,7 +3,7 @@ import KeyGenerationHeader from './KeyGenerationHeader' const KeyGeneration = () => { return ( - + ) diff --git a/src/pages/ValidatorOnboarding/Overview/Overview.tsx b/src/pages/ValidatorOnboarding/Overview/Overview.tsx index b107b2af..3f44b4f2 100644 --- a/src/pages/ValidatorOnboarding/Overview/Overview.tsx +++ b/src/pages/ValidatorOnboarding/Overview/Overview.tsx @@ -7,7 +7,7 @@ import { ArrowRightIcon } from '@status-im/icons' const Overview = () => { return ( <> - + Overview diff --git a/src/pages/ValidatorOnboarding/ValidatorBoxWrapper/ValidatorBoxWrapper.tsx b/src/pages/ValidatorOnboarding/ValidatorBoxWrapper/ValidatorBoxWrapper.tsx index fc94da7d..3e098a53 100644 --- a/src/pages/ValidatorOnboarding/ValidatorBoxWrapper/ValidatorBoxWrapper.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorBoxWrapper/ValidatorBoxWrapper.tsx @@ -15,7 +15,6 @@ const ValidatorBoxWrapper = ({ children }: ValidatorBoxWrapperProps) => { flexDirection: 'row', backgroundColor: '#fff', zIndex: 999, - padding: '16px 32px', width: '100%', }} > diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup.tsx index b9c47a43..9ac54a80 100644 --- a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup.tsx @@ -5,7 +5,7 @@ import { Text } from '@status-im/components' const ValidatorSetup = () => { return ( - + Validator Setup From df14eb9cd12ad5c2d3c9610e28be4136a70dd340 Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Fri, 25 Aug 2023 14:23:56 +0300 Subject: [PATCH 088/357] Implement Card --- public/icons/nethermind-circle.png | Bin 0 -> 4767 bytes .../ValidatorSetup/ExecClientCard.tsx | 37 ++++++++++++++++++ 2 files changed, 37 insertions(+) create mode 100644 public/icons/nethermind-circle.png create mode 100644 src/pages/ValidatorOnboarding/ValidatorSetup/ExecClientCard.tsx diff --git a/public/icons/nethermind-circle.png b/public/icons/nethermind-circle.png new file mode 100644 index 0000000000000000000000000000000000000000..b4e3a2a2cfad08ca5bade3902807b4e6a89eb278 GIT binary patch literal 4767 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 literal 0 HcmV?d00001 diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ExecClientCard.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ExecClientCard.tsx new file mode 100644 index 00000000..5887c80d --- /dev/null +++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ExecClientCard.tsx @@ -0,0 +1,37 @@ +import { YStack } from 'tamagui' +import Icon from '../../../components/General/Icon' +import { Text } from '@status-im/components' + +// make func component + +type ExecClientCardProps = { + name: string + icon: string + isComingSoon?: boolean +} +const ExecClientCard = ({ name, icon, isComingSoon }: ExecClientCardProps) => { + const disabledCardStyle = { + backgroundColor: '#F5F5F5', + border: '1px solid #DCE0E5', + borderRadius: '16px', + padding: '2px 6px', + } + return ( + + + {name} + + + + ) +} +export default ExecClientCard From 269ad8393adc8d06f92cdc69ddd37a3f7c949680 Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Fri, 25 Aug 2023 14:24:07 +0300 Subject: [PATCH 089/357] Add logic and style --- .../ValidatorSetup/ValidatorSetup.tsx | 52 ++++++++++++++++++- 1 file changed, 50 insertions(+), 2 deletions(-) diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup.tsx index b9c47a43..27e89e5b 100644 --- a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup.tsx @@ -1,9 +1,32 @@ -import { YStack } from 'tamagui' +import { XStack, Stack, Text as TextTam, YStack } from 'tamagui' import PairedDeviceCard from './PairedDeviceCard' -import { XStack } from 'tamagui' import { Text } from '@status-im/components' +import ExecClientCard from './ExecClientCard' const ValidatorSetup = () => { + const execClientCardsContent = [ + { + name: 'Nethermind', + icon: '/icons/nethermind-circle.png', + }, + { + name: 'Besu', + icon: '/icons/open-ethereum-circle', + }, + { + name: 'Geth', + icon: '/icons/teku-circle', + }, + { + name: 'Erigon', + icon: '/icons/lighthouse-circle', + }, + { + name: 'Nimbus', + icon: '/icons/prysm-circle', + isComingSoon: true, + }, + ] return ( @@ -12,6 +35,31 @@ const ValidatorSetup = () => { + + + + + Execution Client Detection + + + + No existing execution client installations have been detected on paired device. + + + If you believe this to be incorrect please test your pairing to the correct device and try + again. + + + + + Select Execution client + + + {execClientCardsContent.length && + execClientCardsContent.map(e => ( + + ))} + ) } From a49175aea5dcb4a6f50a3dec64b96380d70e5054 Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Fri, 25 Aug 2023 14:30:22 +0300 Subject: [PATCH 090/357] Add style for different states of cards --- .../ValidatorSetup/ExecClientCard.tsx | 19 +++++++++---------- .../ValidatorSetup/ValidatorSetup.tsx | 8 +++++++- 2 files changed, 16 insertions(+), 11 deletions(-) diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ExecClientCard.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ExecClientCard.tsx index 5887c80d..ce72f566 100644 --- a/src/pages/ValidatorOnboarding/ValidatorSetup/ExecClientCard.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ExecClientCard.tsx @@ -7,27 +7,26 @@ import { Text } from '@status-im/components' type ExecClientCardProps = { name: string icon: string + isSelected?: boolean isComingSoon?: boolean } -const ExecClientCard = ({ name, icon, isComingSoon }: ExecClientCardProps) => { - const disabledCardStyle = { - backgroundColor: '#F5F5F5', - border: '1px solid #DCE0E5', - borderRadius: '16px', - padding: '2px 6px', - } +const ExecClientCard = ({ name, icon, isSelected, isComingSoon }: ExecClientCardProps) => { return ( - + {name} diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup.tsx index 47709f46..cb3da778 100644 --- a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup.tsx @@ -16,6 +16,7 @@ const ValidatorSetup = () => { { name: 'Geth', icon: '/icons/teku-circle', + isSelected: true, }, { name: 'Erigon', @@ -57,7 +58,12 @@ const ValidatorSetup = () => { {execClientCardsContent.length && execClientCardsContent.map(e => ( - + ))} From 1404cbe75c06af2672c602df1f4eb4d3f0b1c3ec Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Fri, 25 Aug 2023 14:50:56 +0300 Subject: [PATCH 091/357] fix: change name of sync card --- .../KeyGeneration/KeyGenerationHeader.tsx | 6 +++--- ...ncCard.stories.ts => KeyGenerationSyncCard.stories.ts} | 8 ++++---- .../{SyncCard.tsx => KeyGenerationSyncCard.tsx} | 6 +++--- 3 files changed, 10 insertions(+), 10 deletions(-) rename src/pages/ValidatorOnboarding/KeyGeneration/{SyncCard.stories.ts => KeyGenerationSyncCard.stories.ts} (62%) rename src/pages/ValidatorOnboarding/KeyGeneration/{SyncCard.tsx => KeyGenerationSyncCard.tsx} (87%) diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationHeader.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationHeader.tsx index 886528f3..f56e01e3 100644 --- a/src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationHeader.tsx +++ b/src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationHeader.tsx @@ -1,5 +1,5 @@ import { XStack } from 'tamagui' -import SyncCard from './SyncCard' +import KeyGenerationSyncCard from './KeyGenerationSyncCard' import KeyGenerationTitle from './KeyGenerationTitle' const KeyGenerationHeader = () => { @@ -7,8 +7,8 @@ const KeyGenerationHeader = () => { - - + + ) diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/SyncCard.stories.ts b/src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationSyncCard.stories.ts similarity index 62% rename from src/pages/ValidatorOnboarding/KeyGeneration/SyncCard.stories.ts rename to src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationSyncCard.stories.ts index 0cfc8197..9873c600 100644 --- a/src/pages/ValidatorOnboarding/KeyGeneration/SyncCard.stories.ts +++ b/src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationSyncCard.stories.ts @@ -1,16 +1,16 @@ import type { Meta, StoryObj } from '@storybook/react' -import SyncCard from './SyncCard' +import KeyGenerationSyncCard from './KeyGenerationSyncCard' const meta = { - title: 'ValidatorOnboarding/SyncCard', - component: SyncCard, + title: 'ValidatorOnboarding/KeyGenerationSyncCard', + component: KeyGenerationSyncCard, parameters: { layout: 'centered', }, tags: ['autodocs'], argTypes: {}, -} satisfies Meta +} satisfies Meta export default meta type Story = StoryObj diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/SyncCard.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationSyncCard.tsx similarity index 87% rename from src/pages/ValidatorOnboarding/KeyGeneration/SyncCard.tsx rename to src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationSyncCard.tsx index ce399e64..8208dcb9 100644 --- a/src/pages/ValidatorOnboarding/KeyGeneration/SyncCard.tsx +++ b/src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationSyncCard.tsx @@ -3,13 +3,13 @@ import StandardGauge from '../../../components/Charts/StandardGauge' import { ClearIcon } from '@status-im/icons' import { Text } from '@status-im/components' -type SyncCardProps = { +type KeyGenerationSyncCardProps = { synced: number total: number title: string } -const SyncCard = ({ synced, total, title }: SyncCardProps) => { +const KeyGenerationSyncCard = ({ synced, total, title }: KeyGenerationSyncCardProps) => { const data = () => { return [ { @@ -54,4 +54,4 @@ const SyncCard = ({ synced, total, title }: SyncCardProps) => { ) } -export default SyncCard +export default KeyGenerationSyncCard From 7a1b16759e4b77f0c6f6decae8b0f40bf1581b8f Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Fri, 25 Aug 2023 14:54:32 +0300 Subject: [PATCH 092/357] fix: change color of close icon --- .../ValidatorOnboarding/KeyGeneration/KeyGenerationSyncCard.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationSyncCard.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationSyncCard.tsx index 8208dcb9..cc36a6c3 100644 --- a/src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationSyncCard.tsx +++ b/src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationSyncCard.tsx @@ -49,7 +49,7 @@ const KeyGenerationSyncCard = ({ synced, total, title }: KeyGenerationSyncCardPr {synced} / {total} - + ) } From f64d7e5c63117e7b1b697534152533ba2dfb55fc Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Fri, 25 Aug 2023 15:01:57 +0300 Subject: [PATCH 093/357] feat: add colors to sync cards --- .../KeyGeneration/KeyGenerationHeader.tsx | 14 ++++++- .../KeyGeneration/KeyGenerationSyncCard.tsx | 37 +++++++++---------- 2 files changed, 30 insertions(+), 21 deletions(-) diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationHeader.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationHeader.tsx index f56e01e3..dd6ecea1 100644 --- a/src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationHeader.tsx +++ b/src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationHeader.tsx @@ -7,8 +7,18 @@ const KeyGenerationHeader = () => { - - + + ) diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationSyncCard.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationSyncCard.tsx index cc36a6c3..8b4c8264 100644 --- a/src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationSyncCard.tsx +++ b/src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationSyncCard.tsx @@ -7,26 +7,10 @@ type KeyGenerationSyncCardProps = { synced: number total: number title: string + color: string } -const KeyGenerationSyncCard = ({ synced, total, title }: KeyGenerationSyncCardProps) => { - const data = () => { - return [ - { - id: 'storage', - label: 'Used', - value: synced, - color: '#2a4af5', - }, - { - id: 'storage', - label: 'Free', - value: total - synced || 1, - color: '#E7EAEE', - }, - ] - } - +const KeyGenerationSyncCard = ({ synced, total, title, color }: KeyGenerationSyncCardProps) => { return ( - + From da0880fc8496462901ed48943ba52ef29aed912c Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Fri, 25 Aug 2023 15:05:04 +0300 Subject: [PATCH 094/357] fix: add color to story sync card --- .../KeyGeneration/KeyGenerationSyncCard.stories.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationSyncCard.stories.ts b/src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationSyncCard.stories.ts index 9873c600..d7213cac 100644 --- a/src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationSyncCard.stories.ts +++ b/src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationSyncCard.stories.ts @@ -20,5 +20,6 @@ export const Page: Story = { synced: 123.524, total: 172.503, title: 'Execution Sync Status', + color: '#2a4af5', }, } From 6e7e70434dcaee6319abc11b30805b28972e1c3f Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Fri, 25 Aug 2023 15:09:30 +0300 Subject: [PATCH 095/357] fix: add valid data to gauges --- .../KeyGeneration/KeyGenerationSyncCard.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationSyncCard.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationSyncCard.tsx index 8b4c8264..199d706b 100644 --- a/src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationSyncCard.tsx +++ b/src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationSyncCard.tsx @@ -26,14 +26,14 @@ const KeyGenerationSyncCard = ({ synced, total, title, color }: KeyGenerationSyn Date: Fri, 25 Aug 2023 15:27:08 +0300 Subject: [PATCH 096/357] feat: add css for stepper subtitle --- .../ValidatorOnboarding/FormStepper/FormStepper.css | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/src/pages/ValidatorOnboarding/FormStepper/FormStepper.css b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.css index a276a5f1..14fe2d98 100644 --- a/src/pages/ValidatorOnboarding/FormStepper/FormStepper.css +++ b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.css @@ -32,3 +32,14 @@ border-radius: 50%; transform: translate(-50%, -50%); } + +.custom-step::after { + content: attr(data-subtitle); + position: absolute; + top: calc(100% + 4px); + left: 30%; + font-size: 12px; + color: #A2A9B0; + background: transparent; + border: none; +} From 0074e80f66a3f3599eaffdf798d94394f3a9b267 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Fri, 25 Aug 2023 15:27:16 +0300 Subject: [PATCH 097/357] feat: add subtitles --- src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx index b4e0bef1..7e76cdbf 100644 --- a/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx +++ b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx @@ -13,37 +13,42 @@ const FormStepper = ({ activeStep, changeActiveStep }: FormStepperProps) => { nonLinear={true} styleConfig={stepStyle} connectorStyleConfig={customConnectorStyle} - style={{ fontSize: '14px', zIndex: 999, width: '100%', padding: 0, marginBottom: '1rem' }} + style={{ fontSize: '14px', zIndex: 999, width: '100%', padding: 0, marginBottom: '2rem' }} > changeActiveStep(0)} completed={activeStep >= 0} + data-subtitle="Get Started" /> changeActiveStep(1)} completed={activeStep > 0} + data-subtitle="Understand your Duties" /> changeActiveStep(2)} completed={activeStep > 1} + data-subtitle="Clients, Nodes & Validators" /> changeActiveStep(3)} completed={activeStep > 2} + data-subtitle="Secure your Keypairs" /> changeActiveStep(4)} completed={activeStep > 3} + data-subtitle="Complete Setup" /> ) From 8aa4413a5f21876ed50ed9ada9b2e984588f86fb Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Fri, 25 Aug 2023 15:31:16 +0300 Subject: [PATCH 098/357] feat: add css identifiers for every step --- .../ValidatorOnboarding/FormStepper/FormStepper.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx index 7e76cdbf..97e07ef6 100644 --- a/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx +++ b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx @@ -16,18 +16,20 @@ const FormStepper = ({ activeStep, changeActiveStep }: FormStepperProps) => { style={{ fontSize: '14px', zIndex: 999, width: '100%', padding: 0, marginBottom: '2rem' }} > changeActiveStep(0)} completed={activeStep >= 0} data-subtitle="Get Started" + data-step="Overview" /> changeActiveStep(1)} completed={activeStep > 0} data-subtitle="Understand your Duties" + data-step="Advicsories" /> { onClick={() => changeActiveStep(2)} completed={activeStep > 1} data-subtitle="Clients, Nodes & Validators" + data-step="Validator Setup" /> { onClick={() => changeActiveStep(3)} completed={activeStep > 2} data-subtitle="Secure your Keypairs" + data-step="Key Generation" /> { onClick={() => changeActiveStep(4)} completed={activeStep > 3} data-subtitle="Complete Setup" + data-step="Activation" /> ) From 027e9f47bada6ab1ebacd49b470d0a52709d5e37 Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Fri, 25 Aug 2023 15:31:27 +0300 Subject: [PATCH 099/357] Upload figma icons --- public/icons/NimbusDisabled.svg | 5 +++++ public/icons/erigon-circle.png | Bin 0 -> 5494 bytes public/icons/gethereum-mascot-circle.png | Bin 0 -> 5094 bytes public/icons/hyperledger-besu-circle.png | Bin 0 -> 2762 bytes .../ValidatorSetup/ValidatorSetup.tsx | 8 ++++---- 5 files changed, 9 insertions(+), 4 deletions(-) create mode 100644 public/icons/NimbusDisabled.svg create mode 100644 public/icons/erigon-circle.png create mode 100644 public/icons/gethereum-mascot-circle.png create mode 100644 public/icons/hyperledger-besu-circle.png diff --git a/public/icons/NimbusDisabled.svg b/public/icons/NimbusDisabled.svg new file mode 100644 index 00000000..528c705d --- /dev/null +++ b/public/icons/NimbusDisabled.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/icons/erigon-circle.png b/public/icons/erigon-circle.png new file mode 100644 index 0000000000000000000000000000000000000000..6a0652ae7595464f505bc6fd69d0b59426104349 GIT binary patch literal 5494 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 literal 0 HcmV?d00001 diff --git a/public/icons/gethereum-mascot-circle.png b/public/icons/gethereum-mascot-circle.png new file mode 100644 index 0000000000000000000000000000000000000000..7aa28153e2caef19b80ed28b6209ff3eb9f711b2 GIT binary patch literal 5094 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 IM6N<$f+d~ZDF6Tf literal 0 HcmV?d00001 diff --git a/public/icons/hyperledger-besu-circle.png b/public/icons/hyperledger-besu-circle.png new file mode 100644 index 0000000000000000000000000000000000000000..bc28640ff6176f41af44e346f1d9c4e4ef735b50 GIT binary patch literal 2762 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 { }, { name: 'Besu', - icon: '/icons/open-ethereum-circle', + icon: '/icons/hyperledger-besu-circle.png', }, { name: 'Geth', - icon: '/icons/teku-circle', + icon: '/icons/gethereum-mascot-circle.png', isSelected: true, }, { name: 'Erigon', - icon: '/icons/lighthouse-circle', + icon: '/icons/erigon-circle.png', }, { name: 'Nimbus', - icon: '/icons/prysm-circle', + icon: '/icons/NimbusDisabled.svg', isComingSoon: true, }, ] From 4a8bfc8b543c2d9c3886d8be4ce943a0e35fdc86 Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Fri, 25 Aug 2023 15:34:06 +0300 Subject: [PATCH 100/357] style close icon --- .../ValidatorOnboarding/ValidatorSetup/PairedDeviceCard.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/PairedDeviceCard.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/PairedDeviceCard.tsx index c09cf29b..5410e02e 100644 --- a/src/pages/ValidatorOnboarding/ValidatorSetup/PairedDeviceCard.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorSetup/PairedDeviceCard.tsx @@ -1,7 +1,7 @@ // make func component for this file import { XStack, YStack } from 'tamagui' -import { CloseCircleIcon } from '@status-im/icons' +import { ClearIcon } from '@status-im/icons' import { Avatar, Text } from '@status-im/components' const PairedDeviceCard = () => { @@ -27,7 +27,7 @@ const PairedDeviceCard = () => { - + ) } From 912c85e6a312afa2657421627c6174c02e1f31c3 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Fri, 25 Aug 2023 15:38:11 +0300 Subject: [PATCH 101/357] feat: add different percentages for every subtitle --- .../FormStepper/FormStepper.css | 21 ++++++++++++++++++- 1 file changed, 20 insertions(+), 1 deletion(-) diff --git a/src/pages/ValidatorOnboarding/FormStepper/FormStepper.css b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.css index 14fe2d98..d923ff5c 100644 --- a/src/pages/ValidatorOnboarding/FormStepper/FormStepper.css +++ b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.css @@ -37,9 +37,28 @@ content: attr(data-subtitle); position: absolute; top: calc(100% + 4px); - left: 30%; font-size: 12px; color: #A2A9B0; background: transparent; border: none; } + +[data-step="Overview"]::after { + left: 37.5%; +} + +[data-step="Advicsories"]::after { + left: 33.5%; +} + +[data-step="Validator Setup"]::after { + left: 29%; +} + +[data-step="Key Generation"]::after { + left: 29%; +} + +[data-step="Activation"]::after { + left: 36%; +} \ No newline at end of file From a60760bc72f4a79b4d4b451858fec88cbc229c5b Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Fri, 25 Aug 2023 15:38:26 +0300 Subject: [PATCH 102/357] Add tag for coming soon --- .../ValidatorSetup/ExecClientCard.tsx | 27 ++++++++++++++++--- 1 file changed, 23 insertions(+), 4 deletions(-) diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ExecClientCard.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ExecClientCard.tsx index ce72f566..da87859b 100644 --- a/src/pages/ValidatorOnboarding/ValidatorSetup/ExecClientCard.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ExecClientCard.tsx @@ -1,4 +1,4 @@ -import { YStack } from 'tamagui' +import { Stack, XStack, YStack } from 'tamagui' import Icon from '../../../components/General/Icon' import { Text } from '@status-im/components' @@ -26,9 +26,28 @@ const ExecClientCard = ({ name, icon, isSelected, isComingSoon }: ExecClientCard }} space={'$12'} > - - {name} - + + + {name} + + {isComingSoon && ( + + + COMING SOON + + + )} + ) From 6606eb1625c3785efaf318d72d01929b90c5e9e8 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Mon, 28 Aug 2023 10:45:20 +0300 Subject: [PATCH 103/357] feat: create reusable box component with same border --- src/components/General/BorderBox.tsx | 15 +++++++++++++++ 1 file changed, 15 insertions(+) create mode 100644 src/components/General/BorderBox.tsx diff --git a/src/components/General/BorderBox.tsx b/src/components/General/BorderBox.tsx new file mode 100644 index 00000000..0a1835b5 --- /dev/null +++ b/src/components/General/BorderBox.tsx @@ -0,0 +1,15 @@ +import { Stack } from 'tamagui' + +type BorderBoxProps = { + children: React.ReactNode +} + +const BorderBox = ({ children }: BorderBoxProps) => { + return ( + + {children} + + ) +} + +export default BorderBox From 10ba1e0cf646d0a66b3f77755fb082eaba9ca281 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Mon, 28 Aug 2023 10:46:16 +0300 Subject: [PATCH 104/357] feat: create story for border box component --- src/components/General/BorderBox.stories.tsx | 21 ++++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 src/components/General/BorderBox.stories.tsx diff --git a/src/components/General/BorderBox.stories.tsx b/src/components/General/BorderBox.stories.tsx new file mode 100644 index 00000000..2e4d55f9 --- /dev/null +++ b/src/components/General/BorderBox.stories.tsx @@ -0,0 +1,21 @@ +import type { Meta, StoryObj } from '@storybook/react' + +import BorderBox from './BorderBox' + +const meta = { + title: 'General/BorderBox', + component: BorderBox, + parameters: { + layout: 'centered', + }, + tags: ['autodocs'], +} satisfies Meta + +export default meta +type Story = StoryObj + +export const DefaultColors: Story = { + args: { + children: 'BorderBox', + }, +} From 3a847e3ab59b253042e7d3a91a6899a3cfe5cb15 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Mon, 28 Aug 2023 11:09:28 +0300 Subject: [PATCH 105/357] feat: use border box for key gen syn card --- .../KeyGeneration/KeyGenerationSyncCard.tsx | 75 +++++++++---------- 1 file changed, 37 insertions(+), 38 deletions(-) diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationSyncCard.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationSyncCard.tsx index 199d706b..be1dc8ae 100644 --- a/src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationSyncCard.tsx +++ b/src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationSyncCard.tsx @@ -2,6 +2,7 @@ import { Stack, XStack, YStack } from 'tamagui' import StandardGauge from '../../../components/Charts/StandardGauge' import { ClearIcon } from '@status-im/icons' import { Text } from '@status-im/components' +import BorderBox from '../../../components/General/BorderBox' type KeyGenerationSyncCardProps = { synced: number @@ -12,44 +13,42 @@ type KeyGenerationSyncCardProps = { const KeyGenerationSyncCard = ({ synced, total, title, color }: KeyGenerationSyncCardProps) => { return ( - - - - - - - {title} - - - {synced} / {total} - - - - + + + + + + + + {title} + + + {synced} / {total} + + + + + ) } From 45014fed2b5f0011d83a9493c1a9c9efd8798bab Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Mon, 28 Aug 2023 11:27:43 +0300 Subject: [PATCH 106/357] feat: create recovery mechanism component --- .../KeyGeneration/KeyGeneration.tsx | 2 ++ .../KeyGeneration/RecoveryMechanism.tsx | 32 +++++++++++++++++++ 2 files changed, 34 insertions(+) create mode 100644 src/pages/ValidatorOnboarding/KeyGeneration/RecoveryMechanism.tsx diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx index aa4f43d6..cb0ba691 100644 --- a/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx +++ b/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx @@ -1,10 +1,12 @@ import { YStack } from 'tamagui' import KeyGenerationHeader from './KeyGenerationHeader' +import RecoveryMechanism from './RecoveryMechanism' const KeyGeneration = () => { return ( + ) } diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryMechanism.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryMechanism.tsx new file mode 100644 index 00000000..5c8eb84f --- /dev/null +++ b/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryMechanism.tsx @@ -0,0 +1,32 @@ +import { Text } from '@status-im/components' +import { XStack } from 'tamagui' +import BorderBox from '../../../components/General/BorderBox' + +const RecoveryMechanism = () => { + return ( + + + Select Recovery Mechanism + + + + + Key Files + + + + + Recovery Phrase + + + + + Both Key Files & Recovery Phrase + + + + + ) +} + +export default RecoveryMechanism From 728bab2b8094c826966eac6972b712215c3a318f Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Mon, 28 Aug 2023 11:48:02 +0300 Subject: [PATCH 107/357] feat: create story for recovery mechanism --- .../RecoveryMechanism.stories.ts | 20 +++++++++++++++++++ 1 file changed, 20 insertions(+) create mode 100644 src/pages/ValidatorOnboarding/KeyGeneration/RecoveryMechanism.stories.ts diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryMechanism.stories.ts b/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryMechanism.stories.ts new file mode 100644 index 00000000..7bc18916 --- /dev/null +++ b/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryMechanism.stories.ts @@ -0,0 +1,20 @@ +import type { Meta, StoryObj } from '@storybook/react' + +import RecoveryMechanism from './RecoveryMechanism' + +const meta = { + title: 'ValidatorOnboarding/RecoveryMechanism', + component: RecoveryMechanism, + parameters: { + layout: 'centered', + }, + tags: ['autodocs'], + argTypes: {}, +} satisfies Meta + +export default meta +type Story = StoryObj + +export const Page: Story = { + args: {}, +} From 8445cc06e1dfbd271585f7f973cd7542d5c587fc Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Mon, 28 Aug 2023 11:57:01 +0300 Subject: [PATCH 108/357] feat: add static components to key generation --- .../KeyGeneration/KeyGeneration.tsx | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx index cb0ba691..6a759b20 100644 --- a/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx +++ b/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx @@ -1,12 +1,29 @@ import { YStack } from 'tamagui' import KeyGenerationHeader from './KeyGenerationHeader' import RecoveryMechanism from './RecoveryMechanism' +import { Button, InformationBox, Text } from '@status-im/components' +import { CloseCircleIcon } from '@status-im/icons' const KeyGeneration = () => { return ( - + + + 4 Validators + + + } + /> + + } + /> ) } From 1bd9d69abf1d27330a0b3e2a1498e322980faba1 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Mon, 28 Aug 2023 12:22:28 +0300 Subject: [PATCH 109/357] feat: create PasswordFields component --- .../KeyGeneration/KeyGeneration.tsx | 2 ++ .../KeyGeneration/PasswordFields.tsx | 21 +++++++++++++++++++ 2 files changed, 23 insertions(+) create mode 100644 src/pages/ValidatorOnboarding/KeyGeneration/PasswordFields.tsx diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx index 6a759b20..964b251d 100644 --- a/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx +++ b/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx @@ -3,6 +3,7 @@ import KeyGenerationHeader from './KeyGenerationHeader' import RecoveryMechanism from './RecoveryMechanism' import { Button, InformationBox, Text } from '@status-im/components' import { CloseCircleIcon } from '@status-im/icons' +import PasswordFields from './PasswordFields' const KeyGeneration = () => { return ( @@ -12,6 +13,7 @@ const KeyGeneration = () => { 4 Validators + { + return ( + + + + + + + + Download Key Files + + + + ) +} + +export default PasswordFields From ea88f9dcf4a4b925b2d2ee0b3c0a29a3ad007d8c Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Mon, 28 Aug 2023 12:33:50 +0300 Subject: [PATCH 110/357] feat: add story for PasswordFields --- .../KeyGeneration/PasswordFields.stories.ts | 20 +++++++++++++++++++ 1 file changed, 20 insertions(+) create mode 100644 src/pages/ValidatorOnboarding/KeyGeneration/PasswordFields.stories.ts diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/PasswordFields.stories.ts b/src/pages/ValidatorOnboarding/KeyGeneration/PasswordFields.stories.ts new file mode 100644 index 00000000..3c516369 --- /dev/null +++ b/src/pages/ValidatorOnboarding/KeyGeneration/PasswordFields.stories.ts @@ -0,0 +1,20 @@ +import type { Meta, StoryObj } from '@storybook/react' + +import PasswordFields from './PasswordFields' + +const meta = { + title: 'ValidatorOnboarding/PasswordFields', + component: PasswordFields, + parameters: { + layout: 'centered', + }, + tags: ['autodocs'], + argTypes: {}, +} satisfies Meta + +export default meta +type Story = StoryObj + +export const Page: Story = { + args: {}, +} From 29eac9c92f0d4143ee4ea0d5a035a188fffb544c Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Mon, 28 Aug 2023 12:40:52 +0300 Subject: [PATCH 111/357] fix: make custom input to expression component --- src/components/General/LabelInputField.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/General/LabelInputField.tsx b/src/components/General/LabelInputField.tsx index fb71d95e..5761ce7b 100644 --- a/src/components/General/LabelInputField.tsx +++ b/src/components/General/LabelInputField.tsx @@ -7,7 +7,7 @@ type LabelInputProps = { placeholderText: string } -function LabelInputField({ labelText, placeholderText }: LabelInputProps) { +const LabelInputField = ({ labelText, placeholderText }: LabelInputProps) => { return (