From 1d09532b1742592117076006f8d6a379b48d2d36 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gabriel=20D=C3=ADaz?= Date: Mon, 8 Jan 2024 22:53:35 +0100 Subject: [PATCH] feat: Upgrade Navbarv2 (#2090) * feat: Add FF navbar2_variant * feat: Upgrade NavbarV2 * feat: Remove max-width * feat: Upgrade decentraland-dapps package * feat: Update decentraland-ui and decentraland-dapps packages * feat: Update decentraland-dapps package --- webapp/package-lock.json | 188 ++++++++++++++++-- webapp/package.json | 4 +- .../src/components/Navbar/Navbar.container.ts | 8 +- webapp/src/components/Navbar/Navbar.tsx | 28 ++- webapp/src/components/Navbar/Navbar.types.ts | 2 + webapp/src/index.css | 1 - webapp/src/modules/features/selectors.spec.ts | 9 +- webapp/src/modules/features/selectors.ts | 11 + webapp/src/modules/features/types.ts | 3 +- 9 files changed, 222 insertions(+), 32 deletions(-) diff --git a/webapp/package-lock.json b/webapp/package-lock.json index 2b826646aa..08b4ef4414 100644 --- a/webapp/package-lock.json +++ b/webapp/package-lock.json @@ -26,9 +26,9 @@ "dcl-catalyst-commons": "^9.0.1", "decentraland-connect": "^5.2.4", "decentraland-crypto-fetch": "^1.0.3", - "decentraland-dapps": "^16.28.1", + "decentraland-dapps": "^16.31.1", "decentraland-transactions": "^1.50.0", - "decentraland-ui": "^4.34.0", + "decentraland-ui": "^4.35.1", "dotenv": "^10.0.0", "ethers": "^5.6.8", "graphql": "^14.7.0", @@ -5456,6 +5456,11 @@ "@sinonjs/commons": "^1.7.0" } }, + "node_modules/@socket.io/component-emitter": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.0.tgz", + "integrity": "sha512-+9jVqKhRSpsc591z5vX+X5Yyw+he/HCB4iQ/RYxw35CEPaY1gnsNE43nf9n9AaYjAQrTiI/mOwKUKdUs9vf7Xg==" + }, "node_modules/@solana/buffer-layout": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/@solana/buffer-layout/-/buffer-layout-4.0.1.tgz", @@ -10972,11 +10977,12 @@ } }, "node_modules/decentraland-connect": { - "version": "5.2.4", - "resolved": "https://registry.npmjs.org/decentraland-connect/-/decentraland-connect-5.2.4.tgz", - "integrity": "sha512-ofYLxbls76Yo/uPW73KbWlan2wLkZCbKEJ7R79r4PYlDUWhPKaKuFauMhEWjVWUAB1VH6Eh/n5pi1CrbPmPpWg==", + "version": "5.4.0", + "resolved": "https://registry.npmjs.org/decentraland-connect/-/decentraland-connect-5.4.0.tgz", + "integrity": "sha512-uC7j/uVTj9hF5Jevedrkj2rgS1OJQ1z0+rfvZTSeV9dKVX8vgMh6Ce9O7YkU4gVBTvI2885K3ZwpQ7IsS4mdWQ==", "dependencies": { "@dcl/schemas": "^9.8.0", + "@dcl/single-sign-on-client": "^0.1.0", "@magic-ext/oauth": "^15.5.0", "@walletconnect/ethereum-provider": "^2.9.2", "@walletconnect/modal": "^2.6.1", @@ -10984,7 +10990,87 @@ "@web3-react/injected-connector": "^6.0.7", "@web3-react/network-connector": "^6.1.3", "@web3-react/walletlink-connector": "^6.2.13", - "magic-sdk": "^21.4.1" + "ethers": "^6.9.1", + "magic-sdk": "^21.4.1", + "socket.io-client": "^4.7.2" + } + }, + "node_modules/decentraland-connect/node_modules/@adraffy/ens-normalize": { + "version": "1.10.0", + "resolved": "https://registry.npmjs.org/@adraffy/ens-normalize/-/ens-normalize-1.10.0.tgz", + "integrity": "sha512-nA9XHtlAkYfJxY7bce8DcN7eKxWWCWkU+1GR9d+U6MbNpfwQp8TI7vqOsBsMcHoT4mBu2kypKoSKnghEzOOq5Q==" + }, + "node_modules/decentraland-connect/node_modules/@noble/hashes": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/@noble/hashes/-/hashes-1.3.2.tgz", + "integrity": "sha512-MVC8EAQp7MvEcm30KWENFjgR+Mkmf+D189XJTkFIlwohU5hcBbn1ZkKq7KVTi2Hme3PMGF390DaL52beVrIihQ==", + "engines": { + "node": ">= 16" + }, + "funding": { + "url": "https://paulmillr.com/funding/" + } + }, + "node_modules/decentraland-connect/node_modules/@types/node": { + "version": "18.15.13", + "resolved": "https://registry.npmjs.org/@types/node/-/node-18.15.13.tgz", + "integrity": "sha512-N+0kuo9KgrUQ1Sn/ifDXsvg0TTleP7rIy4zOBGECxAljqvqfqpTfzx0Q1NUedOixRMBfe2Whhb056a42cWs26Q==" + }, + "node_modules/decentraland-connect/node_modules/aes-js": { + "version": "4.0.0-beta.5", + "resolved": "https://registry.npmjs.org/aes-js/-/aes-js-4.0.0-beta.5.tgz", + "integrity": "sha512-G965FqalsNyrPqgEGON7nIx1e/OVENSgiEIzyC63haUMuvNnwIgIjMs52hlTCKhkBny7A2ORNlfY9Zu+jmGk1Q==" + }, + "node_modules/decentraland-connect/node_modules/ethers": { + "version": "6.9.2", + "resolved": "https://registry.npmjs.org/ethers/-/ethers-6.9.2.tgz", + "integrity": "sha512-YpkrtILnMQz5jSEsJQRTpduaGT/CXuLnUIuOYzHA0v/7c8IX91m2J48wSKjzGL5L9J/Us3tLoUdb+OwE3U+FFQ==", + "funding": [ + { + "type": "individual", + "url": "https://github.com/sponsors/ethers-io/" + }, + { + "type": "individual", + "url": "https://www.buymeacoffee.com/ricmoo" + } + ], + "dependencies": { + "@adraffy/ens-normalize": "1.10.0", + "@noble/curves": "1.2.0", + "@noble/hashes": "1.3.2", + "@types/node": "18.15.13", + "aes-js": "4.0.0-beta.5", + "tslib": "2.4.0", + "ws": "8.5.0" + }, + "engines": { + "node": ">=14.0.0" + } + }, + "node_modules/decentraland-connect/node_modules/tslib": { + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz", + "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==" + }, + "node_modules/decentraland-connect/node_modules/ws": { + "version": "8.5.0", + "resolved": "https://registry.npmjs.org/ws/-/ws-8.5.0.tgz", + "integrity": "sha512-BWX0SWVgLPzYwF8lTzEy1egjhS4S4OEAHfsO8o65WOVsrnSRGaSiUaa9e0ggGlkMTtBlmOpEXiie9RUcBO86qg==", + "engines": { + "node": ">=10.0.0" + }, + "peerDependencies": { + "bufferutil": "^4.0.1", + "utf-8-validate": "^5.0.2" + }, + "peerDependenciesMeta": { + "bufferutil": { + "optional": true + }, + "utf-8-validate": { + "optional": true + } } }, "node_modules/decentraland-crypto-fetch": { @@ -11001,9 +11087,9 @@ } }, "node_modules/decentraland-dapps": { - "version": "16.28.1", - "resolved": "https://registry.npmjs.org/decentraland-dapps/-/decentraland-dapps-16.28.1.tgz", - "integrity": "sha512-JE/uVHIXAigsxtyrN//t9DV5nYcU2RzXaLF8xC+uvz5SCPHTpDIjlV37VyJOdLrKIXaqL2FWM8Mr3v4pjwQWwg==", + "version": "16.31.1", + "resolved": "https://registry.npmjs.org/decentraland-dapps/-/decentraland-dapps-16.31.1.tgz", + "integrity": "sha512-8d9diABTxmFV1YwndPpLhpR1CQN3BWdaodCoZc4NbSiKffTKBNxLipQSAuehqIYrbJ1O97ehgkx6cczmKVE9Sw==", "dependencies": { "@0xsequence/multicall": "^0.25.1", "@0xsequence/relayer": "^0.25.1", @@ -11016,10 +11102,10 @@ "axios": "^0.21.1", "date-fns": "^1.29.0", "dcl-catalyst-client": "^21.1.0", - "decentraland-connect": "^5.2.4", + "decentraland-connect": "^5.4.0", "decentraland-crypto-fetch": "^2.0.1", "decentraland-transactions": "^1.47.0", - "decentraland-ui": "^4.34.0", + "decentraland-ui": "^4.35.1", "ethers": "^5.6.8", "events": "^3.3.0", "flat": "^5.0.2", @@ -11132,9 +11218,9 @@ } }, "node_modules/decentraland-ui": { - "version": "4.34.0", - "resolved": "https://registry.npmjs.org/decentraland-ui/-/decentraland-ui-4.34.0.tgz", - "integrity": "sha512-o0g+4ZYZBIUDcN7EVfMjxg21M0CmTq1YJeF4o+snKjkcowvmnpgD0R8Yw3j5n/CiRGWGJFRgzbIP2owfo+u48Q==", + "version": "4.35.1", + "resolved": "https://registry.npmjs.org/decentraland-ui/-/decentraland-ui-4.35.1.tgz", + "integrity": "sha512-9PAdCVBMaiRht4+0O5e2UuED/T4DP8T0C/Cl6RaYuqWJuj5yFh3L/1AtwjzV5eD3edraJhWrB/QpXHF0YNkRLw==", "dependencies": { "@dcl/schemas": "^9.10.0", "@dcl/ui-env": "^1.4.0", @@ -11901,6 +11987,46 @@ "once": "^1.4.0" } }, + "node_modules/engine.io-client": { + "version": "6.5.3", + "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.5.3.tgz", + "integrity": "sha512-9Z0qLB0NIisTRt1DZ/8U2k12RJn8yls/nXMZLn+/N8hANT3TcYjKFKcwbw5zFQiN4NTde3TSY9zb79e1ij6j9Q==", + "dependencies": { + "@socket.io/component-emitter": "~3.1.0", + "debug": "~4.3.1", + "engine.io-parser": "~5.2.1", + "ws": "~8.11.0", + "xmlhttprequest-ssl": "~2.0.0" + } + }, + "node_modules/engine.io-client/node_modules/ws": { + "version": "8.11.0", + "resolved": "https://registry.npmjs.org/ws/-/ws-8.11.0.tgz", + "integrity": "sha512-HPG3wQd9sNQoT9xHyNCXoDUa+Xw/VevmY9FoHyQ+g+rrMn4j6FB4np7Z0OhdTgjx6MgQLK7jwSy1YecU1+4Asg==", + "engines": { + "node": ">=10.0.0" + }, + "peerDependencies": { + "bufferutil": "^4.0.1", + "utf-8-validate": "^5.0.2" + }, + "peerDependenciesMeta": { + "bufferutil": { + "optional": true + }, + "utf-8-validate": { + "optional": true + } + } + }, + "node_modules/engine.io-parser": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.2.1.tgz", + "integrity": "sha512-9JktcM3u18nU9N2Lz3bWeBgxVgOKpw7yhRaoxQA3FUDZzzw+9WlA6p4G4u0RixNkg14fH7EfEc/RhpurtiROTQ==", + "engines": { + "node": ">=10.0.0" + } + }, "node_modules/enhanced-resolve": { "version": "4.5.0", "dependencies": { @@ -24821,6 +24947,32 @@ "version": "2.0.0", "license": "MIT" }, + "node_modules/socket.io-client": { + "version": "4.7.3", + "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.7.3.tgz", + "integrity": "sha512-nU+ywttCyBitXIl9Xe0RSEfek4LneYkJxCeNnKCuhwoH4jGXO1ipIUw/VA/+Vvv2G1MTym11fzFC0SxkrcfXDw==", + "dependencies": { + "@socket.io/component-emitter": "~3.1.0", + "debug": "~4.3.2", + "engine.io-client": "~6.5.2", + "socket.io-parser": "~4.2.4" + }, + "engines": { + "node": ">=10.0.0" + } + }, + "node_modules/socket.io-parser": { + "version": "4.2.4", + "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.4.tgz", + "integrity": "sha512-/GbIKmo8ioc+NIWIhwdecY0ge+qVBSMdgxGygevmdHj24bsfgtCmcUUcQ5ZzcylGFHsN3k4HB4Cgkl96KVnuew==", + "dependencies": { + "@socket.io/component-emitter": "~3.1.0", + "debug": "~4.3.1" + }, + "engines": { + "node": ">=10.0.0" + } + }, "node_modules/sockjs": { "version": "0.3.24", "license": "MIT", @@ -28961,6 +29113,14 @@ "version": "2.2.0", "license": "MIT" }, + "node_modules/xmlhttprequest-ssl": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.0.0.tgz", + "integrity": "sha512-QKxVRxiRACQcVuQEYFsI1hhkrMlrXHPegbbd1yn9UHOmRxY+si12nQYzri3vbzt8VdTTRviqcKxcyllFas5z2A==", + "engines": { + "node": ">=0.4.0" + } + }, "node_modules/xstream": { "version": "11.14.0", "resolved": "https://registry.npmjs.org/xstream/-/xstream-11.14.0.tgz", diff --git a/webapp/package.json b/webapp/package.json index 1a88454b27..27d8a53753 100644 --- a/webapp/package.json +++ b/webapp/package.json @@ -20,9 +20,9 @@ "dcl-catalyst-commons": "^9.0.1", "decentraland-connect": "^5.2.4", "decentraland-crypto-fetch": "^1.0.3", - "decentraland-dapps": "^16.28.1", + "decentraland-dapps": "^16.31.1", "decentraland-transactions": "^1.50.0", - "decentraland-ui": "^4.34.0", + "decentraland-ui": "^4.35.1", "dotenv": "^10.0.0", "ethers": "^5.6.8", "graphql": "^14.7.0", diff --git a/webapp/src/components/Navbar/Navbar.container.ts b/webapp/src/components/Navbar/Navbar.container.ts index 24bded8087..e1fd26b118 100644 --- a/webapp/src/components/Navbar/Navbar.container.ts +++ b/webapp/src/components/Navbar/Navbar.container.ts @@ -4,7 +4,10 @@ import { isPending } from 'decentraland-dapps/dist/modules/transaction/utils' import { RootState } from '../../modules/reducer' import { getTransactions } from '../../modules/transaction/selectors' -import { getIsAuthDappEnabled } from '../../modules/features/selectors' +import { + getIsAuthDappEnabled, + getIsNavbarV2Enabled +} from '../../modules/features/selectors' import { MapStateProps, MapDispatch, MapDispatchProps } from './Navbar.types' import Navbar from './Navbar' import { getCurrentIdentity } from '../../modules/identity/selectors' @@ -15,7 +18,8 @@ const mapState = (state: RootState): MapStateProps => ({ isPending(tx.status) ), identity: getCurrentIdentity(state) || undefined, - isAuthDappEnabled: getIsAuthDappEnabled(state) + isAuthDappEnabled: getIsAuthDappEnabled(state), + isNavbarV2Enabled: getIsNavbarV2Enabled(state) }) const mapDispatch = (dispatch: MapDispatch): MapDispatchProps => ({ diff --git a/webapp/src/components/Navbar/Navbar.tsx b/webapp/src/components/Navbar/Navbar.tsx index 722a092de4..ec52ac6579 100644 --- a/webapp/src/components/Navbar/Navbar.tsx +++ b/webapp/src/components/Navbar/Navbar.tsx @@ -1,5 +1,7 @@ import React, { useCallback } from 'react' import { Navbar as BaseNavbar } from 'decentraland-dapps/dist/containers' +import { Navbar2 as BaseNavbar2 } from 'decentraland-dapps/dist/containers' +import { Navbar2Pages } from 'decentraland-ui/dist/components/Navbar2/Navbar2.types' import { config } from '../../config' import { locations } from '../../modules/routing/locations' import UserInformation from '../UserInformation' @@ -7,18 +9,9 @@ import { Props } from './Navbar.types' import './Navbar.css' const Navbar = (props: Props) => { - const { - location, - onNavigate, - isAuthDappEnabled - } = props + const { location, onNavigate, isAuthDappEnabled, isNavbarV2Enabled } = props const { pathname, search } = location - props = { - ...props, - rightMenu: - } - const handleOnSignIn = useCallback(() => { const searchParams = new URLSearchParams(search) const currentRedirectTo = searchParams.get('redirectTo') @@ -38,7 +31,17 @@ const Navbar = (props: Props) => { onNavigate(locations.settings()) }, [onNavigate]) - return ( + return isNavbarV2Enabled ? ( + + ) : ( { isSignIn={pathname === locations.signIn()} onSignIn={handleOnSignIn} onClickAccount={handleOnClickAccount} + rightMenu={ + + } /> ) } diff --git a/webapp/src/components/Navbar/Navbar.types.ts b/webapp/src/components/Navbar/Navbar.types.ts index 1423682df8..ae1c14c6fd 100644 --- a/webapp/src/components/Navbar/Navbar.types.ts +++ b/webapp/src/components/Navbar/Navbar.types.ts @@ -10,6 +10,7 @@ export type Props = Partial & { onNavigate: (path: string) => void identity?: AuthIdentity isAuthDappEnabled: boolean + isNavbarV2Enabled: boolean } export type OwnProps = Pick @@ -20,6 +21,7 @@ export type MapStateProps = Pick< | 'hasPendingTransactions' | 'identity' | 'isAuthDappEnabled' + | 'isNavbarV2Enabled' > export type MapDispatchProps = Pick export type MapDispatch = Dispatch diff --git a/webapp/src/index.css b/webapp/src/index.css index 9aa2dc8040..e4d5b044b2 100644 --- a/webapp/src/index.css +++ b/webapp/src/index.css @@ -54,7 +54,6 @@ code { .ui.container { width: 100%; - max-width: 1360px !important; } .dcl.toast .toast-info .body .ui.basic.button.no-padding { diff --git a/webapp/src/modules/features/selectors.spec.ts b/webapp/src/modules/features/selectors.spec.ts index ea572c142a..ab991b2871 100644 --- a/webapp/src/modules/features/selectors.spec.ts +++ b/webapp/src/modules/features/selectors.spec.ts @@ -25,7 +25,8 @@ import { getIsSmartWearablesFTUEnabled, isLoadingFeatureFlags, getIsBuyCrossChainEnabled, - getIsAuthDappEnabled + getIsAuthDappEnabled, + getIsNavbarV2Enabled } from './selectors' import { FeatureName } from './types' @@ -222,6 +223,12 @@ const waitForInitialLoadingSelectors = [ feature: FeatureName.AUTH_DAPP, selector: getIsAuthDappEnabled, applicationName: ApplicationName.DAPPS + }, + { + name: 'navbar-v2', + feature: FeatureName.NAVBAR_V2, + selector: getIsNavbarV2Enabled, + applicationName: ApplicationName.DAPPS } ] diff --git a/webapp/src/modules/features/selectors.ts b/webapp/src/modules/features/selectors.ts index 3e42f6fd8e..10a2315bb4 100644 --- a/webapp/src/modules/features/selectors.ts +++ b/webapp/src/modules/features/selectors.ts @@ -228,3 +228,14 @@ export const getIsAuthDappEnabled = (state: RootState) => { } return false } + +export const getIsNavbarV2Enabled = (state: RootState) => { + if (hasLoadedInitialFlags(state)) { + return getIsFeatureEnabled( + state, + ApplicationName.DAPPS, + FeatureName.NAVBAR_V2 + ) + } + return false +} diff --git a/webapp/src/modules/features/types.ts b/webapp/src/modules/features/types.ts index 1eb7ff6db3..0055fe2629 100644 --- a/webapp/src/modules/features/types.ts +++ b/webapp/src/modules/features/types.ts @@ -19,5 +19,6 @@ export enum FeatureName { SMART_WEARABLES_FTU = 'smart-wearables-ftu', MARKETPLACE_SERVER = 'marketplace-server', BUY_CROSS_CHAIN = 'buy-cross-chain', - AUTH_DAPP = 'auth-dapp' + AUTH_DAPP = 'auth-dapp', + NAVBAR_V2 = 'navbar2_variant' }