Merge branch 'main' into LW-11252-fix-test-lw-7819

.github/actions/build/app/action.yml

@@ -0,0 +1,65 @@
+name: buildapp
+description: Build app
+
+inputs:
+  DIR:
+    description: 'app directory'
+    required: true
+  NAME:
+    description: 'app name'
+    required: true
+  LACE_EXTENSION_KEY:
+    description: 'Public extended manifest key'
+    required: true
+  BUILD_DEV_PREVIEW:
+    description: 'Build developer preview of Lace'
+    required: false
+    default: 'false'
+  POSTHOG_PRODUCTION_TOKEN_MAINNET:
+    description: 'Post hog production mainnet token'
+    required: false
+    default: ''
+  POSTHOG_PRODUCTION_TOKEN_PREPROD:
+    description: 'Post hog production preprod token'
+    required: false
+    default: ''
+  POSTHOG_PRODUCTION_TOKEN_PREVIEW:
+    description: 'Post hog production preview token'
+    required: false
+    default: ''
+  PRODUCTION_MODE_TRACKING:
+    description: 'Enable analytics tracking in production'
+    required: false
+    default: 'false'
+  BANXA_LACE_URL:
+    description: 'Banxa`s integration URL'
+    required: false
+    default: 'https://lacewallet.banxa-sandbox.com/'
+
+runs:
+  using: 'composite'
+
+  steps:
+    - name: Code check
+      uses: ./.github/actions/check
+      with:
+        DIR: ${{ inputs.DIR }}
+
+    - name: Build ${{ inputs.NAME }}
+      run: yarn build
+      shell: bash
+      working-directory: ${{ inputs.DIR }}
+      env:
+        LACE_EXTENSION_KEY: ${{ inputs.LACE_EXTENSION_KEY }}
+        BUILD_DEV_PREVIEW: ${{ inputs.BUILD_DEV_PREVIEW }}
+        POSTHOG_PRODUCTION_TOKEN_MAINNET: ${{ inputs.POSTHOG_PRODUCTION_TOKEN_MAINNET }}
+        POSTHOG_PRODUCTION_TOKEN_PREPROD: ${{ inputs.POSTHOG_PRODUCTION_TOKEN_PREPROD }}
+        POSTHOG_PRODUCTION_TOKEN_PREVIEW: ${{ inputs.POSTHOG_PRODUCTION_TOKEN_PREVIEW }}
+        PRODUCTION_MODE_TRACKING: ${{ inputs.PRODUCTION_MODE_TRACKING }}
+        BANXA_LACE_URL: ${{ inputs.BANXA_LACE_URL }}
+
+    - name: Upload artifact
+      uses: actions/upload-artifact@v4
+      with:
+        name: ${{ inputs.NAME }}
+        path: ${{ inputs.DIR }}/dist

.github/workflows/ci.yml

@@ -124,6 +124,68 @@ jobs:
       - name: Execute unit tests
         uses: ./.github/actions/test/unit
 
+  release-pkg:
+    name: Release package
+    runs-on: ubuntu-20.04
+    needs: prepare
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js and install dependencies
+        uses: ./.github/actions/install
+        with:
+          WALLET_PASSWORD: ${{ secrets.WALLET_PASSWORD_TESTNET }}
+          GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
+
+      - name: Download packages-common
+        uses: actions/download-artifact@v4
+        with:
+          name: packages-common
+          path: packages/common/dist
+
+      - name: Download packages-cardano
+        uses: actions/download-artifact@v4
+        with:
+          name: packages-cardano
+          path: packages/cardano/dist
+
+      - name: Download packages-translation
+        uses: actions/download-artifact@v4
+        with:
+          name: packages-translation
+          path: packages/translation/dist
+
+      - name: Download packages-core
+        uses: actions/download-artifact@v4
+        with:
+          name: packages-core
+          path: packages/core/dist
+
+      - name: Download packages-staking
+        uses: actions/download-artifact@v4
+        with:
+          name: packages-staking
+          path: packages/staking/dist
+
+      - name: Collect Workflow Telemetry Smoke Tests
+        uses: catchpoint/workflow-telemetry-action@v2
+        with:
+          comment_on_pr: false
+
+      - name: Build Lace browser extension
+        uses: ./.github/actions/build/app
+        with:
+          DIR: apps/browser-extension-wallet
+          NAME: lace-browser-extension
+          LACE_EXTENSION_KEY: ${{ secrets.MANIFEST_PUBLIC_KEY }}
+          POSTHOG_PRODUCTION_TOKEN_MAINNET: ${{ startsWith(github.ref, 'refs/heads/release') && secrets.POSTHOG_PRODUCTION_TOKEN_MAINNET || '' }}
+          POSTHOG_PRODUCTION_TOKEN_PREPROD: ${{ startsWith(github.ref, 'refs/heads/release') && secrets.POSTHOG_PRODUCTION_TOKEN_PREPROD || '' }}
+          POSTHOG_PRODUCTION_TOKEN_PREVIEW: ${{ startsWith(github.ref, 'refs/heads/release') && secrets.POSTHOG_PRODUCTION_TOKEN_PREVIEW || '' }}
+          PRODUCTION_MODE_TRACKING: ${{ startsWith(github.ref, 'refs/heads/release') && 'true' || 'false' }}
+          BANXA_LACE_URL: ${{ startsWith(github.ref, 'refs/heads/release') && 'https://lacewallet.banxa.com/' }}
+
   build:
     name: Build Lace
     runs-on: ubuntu-22.04

apps/browser-extension-wallet/package.json

@@ -50,12 +50,13 @@
     "@cardano-sdk/wallet": "0.41.0",
     "@cardano-sdk/web-extension": "0.30.0",
     "@emurgo/cip14-js": "~3.0.1",
-    "@input-output-hk/lace-ui-toolkit": "1.9.0",
+    "@input-output-hk/lace-ui-toolkit": "1.15.1",
     "@lace/cardano": "0.1.0",
     "@lace/common": "0.1.0",
     "@lace/core": "0.1.0",
     "@lace/staking": "0.1.0",
     "@lace/translation": "0.1.0",
+    "@pdfme/generator": "^4.0.2",
     "@react-rxjs/core": "^0.9.8",
     "@react-rxjs/utils": "^0.9.5",
     "@vespaiach/axios-fetch-adapter": "^0.3.0",
@@ -73,12 +74,15 @@
     "graphql-tag": "2.12.5",
     "i18next": "^22.5.1",
     "intersection-observer-polyfill": "0.1.0",
+    "jsqr": "^1.4.0",
     "lodash": "4.17.21",
     "node-abort-controller": "^3.1.1",
+    "openpgp": "^5.11.2",
     "p-debounce": "^4.0.0",
     "pluralize": "^8.0.0",
     "posthog-js": "^1.68.4",
     "process": "^0.11.10",
+    "qrcode": "^1.5.3",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-i18next": "^12.3.1",
@@ -93,9 +97,14 @@
   "devDependencies": {
     "@cardano-sdk/hardware-ledger": "0.11.0",
     "@emurgo/cardano-message-signing-asmjs": "1.0.1",
+    "@openpgp/web-stream-tools": "0.0.11-patch-0",
+    "@pdfme/common": "^4.0.2",
+    "@pdfme/schemas": "^4.0.2",
     "@types/dotenv-webpack": "7.0.3",
     "@types/pluralize": "^0.0.29",
+    "@types/qrcode": "^1",
     "@types/react-lottie": "^1.2.6",
+    "@types/text-encoding-utf-8": "^1",
     "@types/uuid": "^8.3.4",
     "@types/w3c-web-hid": "^1.0.3",
     "@types/webextension-polyfill": "0.8.0",
@@ -105,6 +114,7 @@
     "fake-indexeddb": "3.1.3",
     "fork-ts-checker-webpack-plugin": "^7.2.1",
     "jest-webextension-mock": "^3.7.19",
+    "text-encoding-utf-8": "^1.0.2",
     "tsconfig-paths-webpack-plugin": "3.5.2",
     "webassembly-loader-sw": "^1.1.0"
   }

apps/browser-extension-wallet/src/components/MigrationContainer/MigrationContainer.tsx

@@ -10,6 +10,7 @@ import { Lock } from '@src/views/browser-view/components/Lock';
 import { MainLoader } from '@components/MainLoader';
 import { FailedMigration } from './FailedMigration';
 import { MigrationInProgress } from './MigrationInProgress';
+import { OnPasswordChange } from '@lace/core';
 
 export interface MigrationContainerProps {
   children: React.ReactNode;
@@ -40,12 +41,12 @@ export const MigrationContainer = ({ children, appMode }: MigrationContainerProp
     if (appMode === APP_MODE_POPUP) await applyMigrations(migrationState, password);
   }, [migrationState, password, appMode]);
 
-  const handlePasswordChange = useCallback(
-    ({ target: { value } }: React.ChangeEvent<HTMLInputElement>) => {
+  const handlePasswordChange = useCallback<OnPasswordChange>(
+    (target) => {
       if (!isValidPassword) {
         setIsValidPassword(true);
       }
-      setPassword(value);
+      setPassword(target.value);
     },
     [isValidPassword]
   );
@@ -62,14 +63,14 @@ export const MigrationContainer = ({ children, appMode }: MigrationContainerProp
   const onUnlock = useCallback(async (): Promise<void> => {
     setIsVerifyingPassword(true);
     try {
-      await unlockWallet(password);
+      await unlockWallet();
       setIsValidPassword(true);
       await migrate();
     } catch {
       setIsValidPassword(false);
     }
     setIsVerifyingPassword(false);
-  }, [password, unlockWallet, migrate]);
+  }, [unlockWallet, migrate]);
 
   useEffect(() => {
     // Load initial migrationState value
@@ -141,7 +142,7 @@ export const MigrationContainer = ({ children, appMode }: MigrationContainerProp
       <UnlockWallet
         isLoading={isVerifyingPassword}
         onUnlock={onUnlock}
-        passwordInput={{ value: password, handleChange: handlePasswordChange, invalidPass: !isValidPassword }}
+        passwordInput={{ handleChange: handlePasswordChange, invalidPass: !isValidPassword }}
         unlockButtonDisabled={password === ''}
         // TODO: show forgot password here too. Use same logic as in ResetDataError on click
         showForgotPassword={false}

apps/browser-extension-wallet/src/features/dapp/components/SignData.tsx

@@ -2,7 +2,8 @@ import React, { useCallback, useState, useMemo } from 'react';
 import { Spin } from 'antd';
 import { Wallet } from '@lace/cardano';
 import { useTranslation } from 'react-i18next';
-import { Button, inputProps, Password } from '@lace/common';
+import { Button } from '@lace/common';
+import { OnPasswordChange, Password } from '@lace/core';
 import { useRedirection } from '@hooks';
 import { dAppRoutePaths } from '@routes';
 import { Layout } from './Layout';
@@ -40,7 +41,7 @@ export const SignData = (): React.ReactElement => {
     }
   }, [password, redirectToSignFailure, redirectToSignSuccess, request]);
 
-  const handleChange: inputProps['onChange'] = ({ target: { value } }) => setPassword(value);
+  const handleChange: OnPasswordChange = (target) => setPassword(target.value);
 
   const confirmIsDisabled = useMemo(() => {
     if (request.walletType !== WalletType.InMemory) return false;
@@ -56,7 +57,6 @@ export const SignData = (): React.ReactElement => {
           </h5>
           <Password
             onChange={handleChange}
-            value={password}
             error={validPassword === false}
             errorMessage={t('browserView.transaction.send.error.invalidPassword')}
           />

apps/browser-extension-wallet/src/features/dapp/components/SignTransaction.tsx

@@ -2,7 +2,8 @@ import React, { useCallback, useState, useMemo } from 'react';
 import { Spin } from 'antd';
 import { Wallet } from '@lace/cardano';
 import { useTranslation } from 'react-i18next';
-import { Button, inputProps, Password, PostHogAction } from '@lace/common';
+import { Button, PostHogAction } from '@lace/common';
+import { OnPasswordChange, Password } from '@lace/core';
 import { useRedirection } from '@hooks';
 import { dAppRoutePaths } from '@routes';
 import { Layout } from './Layout';
@@ -50,7 +51,7 @@ export const SignTransaction = (): React.ReactElement => {
     }
   }, [password, analytics, redirectToSignFailure, redirectToSignSuccess, request]);
 
-  const handleChange: inputProps['onChange'] = ({ target: { value } }) => setPassword(value);
+  const handleChange: OnPasswordChange = (target) => setPassword(target.value);
 
   const confirmIsDisabled = useMemo(() => {
     if (request.walletType !== WalletType.InMemory) return false;
@@ -73,7 +74,6 @@ export const SignTransaction = (): React.ReactElement => {
           </h5>
           <Password
             onChange={handleChange}
-            value={password}
             error={validPassword === false}
             errorMessage={t('browserView.transaction.send.error.invalidPassword')}
             autoFocus

apps/browser-extension-wallet/src/features/dapp/components/collateral/CreateCollateral.tsx

@@ -1,14 +1,14 @@
 /* eslint-disable react/no-multi-comp */
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { DappCreateCollateralProps } from './types';
-import { DappInfo, RowContainer, renderAmountInfo, renderLabel } from '@lace/core';
+import { OnPasswordChange, Password, DappInfo, RowContainer, renderAmountInfo, renderLabel } from '@lace/core';
 import { APIErrorCode, ApiError } from '@cardano-sdk/dapp-connector';
 import { Wallet } from '@lace/cardano';
 import { useTranslation } from 'react-i18next';
 import { useWalletStore } from '@src/stores';
 import { useFetchCoinPrice } from '@hooks';
 import { Layout } from '../Layout';
-import { Banner, Button, Password, inputProps, useObservable } from '@lace/common';
+import { Banner, Button, useObservable } from '@lace/common';
 import { firstValueFrom } from 'rxjs';
 import { map, take, filter } from 'rxjs/operators';
 import { isNotNil } from '@cardano-sdk/util';
@@ -34,9 +34,9 @@ export const CreateCollateral = ({
   const [password, setPassword] = useState('');
   const [isPasswordValid, setIsPasswordValid] = useState(true);
 
-  const handleChange: inputProps['onChange'] = ({ target: { value } }) => {
+  const handleChange: OnPasswordChange = (target) => {
     setIsPasswordValid(true);
-    setPassword(value);
+    setPassword(target.value);
   };
   const { priceResult } = useFetchCoinPrice();
   const { fiatCurrency } = useCurrencyStore();
@@ -110,7 +110,6 @@ export const CreateCollateral = ({
               <Spin spinning={false}>
                 <Password
                   onChange={handleChange}
-                  value={password}
                   error={isPasswordValid === false}
                   errorMessage={t('browserView.transaction.send.error.invalidPassword')}
                   label={t('browserView.transaction.send.password.placeholder')}

apps/browser-extension-wallet/src/features/delegation/components/MultiDelegationStakingPopup.tsx

@@ -10,7 +10,7 @@ import {
 } from '@providers';
 import { useBalances, useCustomSubmitApi, useFetchCoinPrice, useLocalStorage, useStakingRewards } from '@hooks';
 import { useDelegationStore } from '@src/features/delegation/stores';
-import { usePassword, useSubmitingState } from '@views/browser/features/send-transaction';
+import { useSubmitingState } from '@views/browser/features/send-transaction';
 import { networkInfoStatusSelector, useWalletStore } from '@stores';
 import { compactNumberWithUnit } from '@utils/format-number';
 import { SectionTitle } from '@components/Layout/SectionTitle';
@@ -28,15 +28,15 @@ import {
 import { withSignTxConfirmation } from '@lib/wallet-api-ui';
 import { isMultidelegationSupportedByDevice } from '@views/browser/features/staking';
 import { useSharedWalletData } from '@hooks/useSharedWalletData';
-import { SignPolicy } from '@lace/core';
+import { SignPolicy, useSecrets } from '@lace/core';
 
 export const MultiDelegationStakingPopup = (): JSX.Element => {
   const { t } = useTranslation();
   const { theme } = useTheme();
   const { handleOpenBrowser } = useBackgroundServiceAPIContext();
   const { delegationTxBuilder, setDelegationTxBuilder, delegationTxFee, setDelegationTxFee } = useDelegationStore();
   const openExternalLink = useExternalLinkOpener();
-  const password = usePassword();
+  const password = useSecrets();
   const submittingState = useSubmitingState();
   const { priceResult } = useFetchCoinPrice();
   const { balance } = useBalances(priceResult?.cardano?.price);

apps/browser-extension-wallet/src/features/unlock-wallet/components/UnlockWallet.tsx

@@ -1,15 +1,15 @@
 import React from 'react';
 import { ContentLayout } from '@components/Layout';
 import laceLogoMark from '@src/assets/branding/lace-logo-mark.svg';
-import { Button, Password, PasswordProps } from '@lace/common';
+import { Button } from '@lace/common';
+import { Password, PasswordProps } from '@lace/core';
 import styles from './UnlockWallet.module.scss';
 import { useTranslation } from 'react-i18next';
 import { ForgotPassword } from './ForgotPassword';
 
 interface PasswordInput {
   handleChange?: PasswordProps['onChange'];
   invalidPass?: PasswordProps['error'];
-  value?: PasswordProps['value'];
 }
 
 export interface UnlockWalletProps {
@@ -41,7 +41,6 @@ export const UnlockWallet = ({
           <Password
             errorMessage={t('general.errors.invalidPassword')}
             error={passwordInput.invalidPass}
-            value={passwordInput.value}
             onChange={passwordInput.handleChange}
             onPressEnter={(e) => {
               e.preventDefault();