Merge branch 'main' into feat/add-language-selection

Author: mchappell

apps/browser-extension-wallet/manifest.json

@@ -1,7 +1,7 @@
 {
   "name": "$WALLET_MANIFEST_NAME",
   "description": "One fast, accessible, and secure platform for digital assets, DApps, NFTs, and DeFi.",
-  "version": "1.28.0",
+  "version": "1.29.0",
   "manifest_version": 3,
   "icons": {
     "16": "icon16.png",

apps/browser-extension-wallet/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lace/browser-extension-wallet",
-  "version": "1.28.0",
+  "version": "1.29.0",
   "description": "A fully capable wallet packaged as browser extensions for Chrome, Firefox, and Edge",
   "homepage": "https://github.com/input-output-hk/lace/blob/master/apps/browser-extension-wallet/README.md",
   "bugs": {
@@ -26,12 +26,13 @@
   ],
   "scripts": {
     "build": "run-s cleanup:dist build:project",
-    "build:app": "NODE_OPTIONS='--openssl-legacy-provider' run -T webpack --config webpack.app.${WEBPACK_ENV:-prod}.js --progress",
+    "build:app": "run -T webpack --config webpack.app.${WEBPACK_ENV:-prod}.js --progress",
+    "build:cs": "run -T webpack --config webpack.cs.${WEBPACK_ENV:-prod}.js --progress",
     "build:dev": "WEBPACK_ENV=dev yarn build",
     "build:firefox": "BROWSER=firefox yarn build",
     "build:firefox:dev": "WEBPACK_ENV=dev yarn build:firefox",
-    "build:project": "run-p build:sw build:app",
-    "build:sw": "NODE_OPTIONS='--openssl-legacy-provider' run -T webpack --config webpack.sw.${WEBPACK_ENV:-prod}.js --progress",
+    "build:project": "run-p build:sw build:app build:cs",
+    "build:sw": "run -T webpack --config webpack.sw.${WEBPACK_ENV:-prod}.js --progress",
     "cleanup": "run-p cleanup:*",
     "cleanup:dist": "rm -rf dist",
     "cleanup:firefox-artifacts": "rm -rf artifacts-firefox",
@@ -45,26 +46,26 @@
     "pack:firefox": "run-s cleanup:firefox-artifacts && web-ext build --source-dir=./dist/ --filename=lace-firefox-browser-extension.zip --artifacts-dir=artifacts-firefox && unzip -o artifacts-firefox/lace-firefox-browser-extension.zip -d artifacts-firefox && rm -rf artifacts-firefox/lace-firefox-browser-extension.zip",
     "prepare": "ts-patch install -s",
     "prettier": "run -T prettier --write .",
-    "serve:app": "NODE_OPTIONS='--openssl-legacy-provider' run -T webpack serve --config webpack.app.dev.js --env RUN_DEV_SERVER=true",
+    "serve:app": "run -T webpack serve --config webpack.app.dev.js --env RUN_DEV_SERVER=true",
     "test": "run -T jest --config test/jest.config.js",
     "test:e2e": "yarn exec echo \"No e2e tests on this app yet!\"",
     "type-check": "echo \"@lace/browser-extension-wallet: no type-check command specified\"",
     "watch": " run-s cleanup:dist watch:project",
-    "watch:app": "NODE_OPTIONS='--openssl-legacy-provider' run -T webpack --config webpack.app.dev.js --progress --watch",
-    "watch:sw": "NODE_OPTIONS='--openssl-legacy-provider' run -T webpack --config webpack.sw.dev.js --progress --watch",
+    "watch:app": "run -T webpack --config webpack.app.dev.js --progress --watch",
+    "watch:sw": "run -T webpack --config webpack.sw.dev.js --progress --watch",
     "watch:project": "run-p watch:sw watch:app"
   },
   "dependencies": {
     "@ant-design/icons": "^4.7.0",
-    "@cardano-sdk/cardano-services-client": "0.26.27",
-    "@cardano-sdk/core": "0.46.9",
-    "@cardano-sdk/dapp-connector": "0.13.23",
-    "@cardano-sdk/input-selection": "0.14.25",
-    "@cardano-sdk/tx-construction": "0.28.7",
-    "@cardano-sdk/util": "0.17.0",
-    "@cardano-sdk/util-rxjs": "0.9.27",
-    "@cardano-sdk/wallet": "0.53.20",
-    "@cardano-sdk/web-extension": "0.39.30",
+    "@cardano-sdk/cardano-services-client": "0.26.28",
+    "@cardano-sdk/core": "0.46.10",
+    "@cardano-sdk/dapp-connector": "0.13.24",
+    "@cardano-sdk/input-selection": "0.14.26",
+    "@cardano-sdk/tx-construction": "0.28.8",
+    "@cardano-sdk/util": "0.17.1",
+    "@cardano-sdk/util-rxjs": "0.9.28",
+    "@cardano-sdk/wallet": "0.53.21",
+    "@cardano-sdk/web-extension": "0.39.32",
     "@emurgo/cip14-js": "~3.0.1",
     "@input-output-hk/lace-ui-toolkit": "3.5.0",
     "@lace/bitcoin": "0.1.0",
@@ -119,7 +120,7 @@
     "zustand": "3.5.14"
   },
   "devDependencies": {
-    "@cardano-sdk/hardware-ledger": "0.16.18",
+    "@cardano-sdk/hardware-ledger": "0.16.19",
     "@emurgo/cardano-message-signing-asmjs": "1.0.1",
     "@openpgp/web-stream-tools": "0.0.11-patch-0",
     "@pdfme/common": "^4.0.2",

apps/browser-extension-wallet/src/assets/icons/notifications-bell.component.svg

@@ -156,7 +156,8 @@ export const WalletAccounts = ({ isPopup, onBack }: { isPopup: boolean; onBack:
         await addAccount({
           wallet,
           accountIndex,
-          metadata: { name }
+          metadata: { name },
+          derivationType: wallet.metadata.trezorConfig?.derivationType
         });
         analytics.sendEventToPostHog(PostHogAction.MultiWalletEnableAccount, {
           // eslint-disable-next-line camelcase

apps/browser-extension-wallet/src/components/MainMenu/DropdownMenuOverlay/components/WalletAccounts.tsx

@@ -27,7 +27,7 @@
     .controls {
       display: flex;
       align-items: center;
-      gap: size_unit(1);
+      gap: size_unit(0.75);
 
       .avatar {
         font-size: 20px;
@@ -47,7 +47,7 @@
 }
 
 .betaPill {
-  background: linear-gradient(94.22deg, #FF92E1 -18.3%, #FDC300 118.89%);
+  background: linear-gradient(94.22deg, #ff92e1 -18.3%, #fdc300 118.89%);
   border-radius: 100px;
 
   .betaPillCopy {

apps/browser-extension-wallet/src/components/MainMenu/MainHeader.module.scss

@@ -13,6 +13,7 @@ import { BrowserViewSections } from '@lib/scripts/types';
 import { NetworkPill } from '@components/NetworkPill';
 import { useAnalyticsContext } from '@providers';
 import { PostHogAction } from '@providers/AnalyticsProvider/analyticsTracker';
+import { NotificationsBellContainer } from '@components/NotificationsCenter';
 
 export const MainHeader = (): React.ReactElement => {
   const { t } = useTranslation();
@@ -60,6 +61,7 @@ export const MainHeader = (): React.ReactElement => {
                 .then(() => window.close())
             }
           />
+          <NotificationsBellContainer popupView />
           <DropdownMenu isPopup />
         </div>
       </div>

apps/browser-extension-wallet/src/components/MainMenu/MainHeader.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Button } from '@lace/common';
+import styles from './NotificationsCenter.module.scss';
+import NotificationBellIcon from '../../assets/icons/notifications-bell.component.svg';
+
+// eslint-disable-next-line no-magic-numbers
+const formatNotificationCount = (count: number) => (count < 10 ? count.toString() : '9+');
+
+export interface NotificationsBellProps {
+  notificationsCount: number;
+  onClick: () => void;
+  popupView?: boolean;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const NotificationsBell = ({ notificationsCount, onClick }: NotificationsBellProps): React.ReactElement => (
+  <Button className={styles.btn} block onClick={onClick} color="gradient" data-testid="notifications-bell">
+    <NotificationBellIcon />
+    {notificationsCount > 0 && <span className={styles.badge}>{formatNotificationCount(notificationsCount)}</span>}
+  </Button>
+);

apps/browser-extension-wallet/src/components/NotificationsCenter/NotificationsBell.tsx

@@ -0,0 +1,27 @@
+import React, { useState } from 'react';
+import { NotificationsBell } from './NotificationsBell';
+import { usePostHogClientContext } from '@providers/PostHogClientProvider';
+import { ExperimentName } from '@lib/scripts/types/feature-flags';
+export interface NotificationsCenterContainerProps {
+  popupView?: boolean;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const NotificationsBellContainer = ({ popupView }: NotificationsCenterContainerProps): React.ReactElement => {
+  const posthog = usePostHogClientContext();
+
+  // TODO Connect with notifications center
+  const [notificationsCount, setNotificationsCount] = useState(0);
+
+  // TODO Connect with notifications center
+  const handleClick = () => {
+    // eslint-disable-next-line no-magic-numbers
+    setNotificationsCount(notificationsCount === 11 ? 0 : notificationsCount + 1);
+  };
+
+  return (
+    posthog?.isFeatureFlagEnabled(ExperimentName.NOTIFICATIONS_CENTER) && (
+      <NotificationsBell notificationsCount={notificationsCount} onClick={handleClick} popupView={popupView} />
+    )
+  );
+};

apps/browser-extension-wallet/src/components/NotificationsCenter/NotificationsBellContainer.tsx

@@ -0,0 +1,27 @@
+@import '../../../../../packages/core/src/ui/styles/theme.scss';
+@import '../../../../../packages/common/src/ui/styles/theme.scss';
+
+.badge {
+  position: absolute;
+  top: size_unit(-2);
+  right: size_unit(-2);
+  background: #7f5af0;
+  color: white;
+  border-radius: 50%;
+  padding: 2px 2px;
+  font-size: size_unit(1.5);
+  font-weight: bold;
+  min-width: size_unit(2.5);
+  height: size_unit(2.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: 'Proxima Nova', Arial, Helvetica, sans-serif;
+}
+
+.btn {
+  max-width: size_unit(6);
+  min-width: size_unit(6) !important;
+  padding: size_unit(1) size_unit(2.75) !important;
+  position: relative;
+}

apps/browser-extension-wallet/src/components/NotificationsCenter/NotificationsCenter.module.scss

@@ -0,0 +1,2 @@
+export * from './NotificationsBell';
+export * from './NotificationsBellContainer';