legacy mode merge

.github/CODEOWNERS

@@ -7,6 +7,7 @@ yarn.lock               @input-output-hk/lace-core
 /packages/common/       @input-output-hk/lace-core
 /packages/core/         @input-output-hk/lace-core
 /packages/e2e-tests/    @input-output-hk/xsy-lace-test-engineers
+/packages/nami/         @input-output-hk/lace-core
 /packages/staking/      @input-output-hk/lace-core
 /packages/translation/  @input-output-hk/lace-core
 

.github/workflows/chromatic-nami.yml

@@ -0,0 +1,42 @@
+name: Chromatic deploy packages/nami
+
+on:
+  pull_request:
+    types: [opened, synchronize, reopened, ready_for_review]
+    paths:
+      - packages/nami/**
+  push:
+    paths:
+      - packages/nami/**
+    branches:
+      - main
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  chromatic-deployment:
+    name: Chromatic Nami
+    if: github.event.pull_request.draft == false
+    runs-on: ubuntu-22.04
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Setup Node.js and install dependencies
+        uses: ./.github/actions/install
+        with:
+          WALLET_PASSWORD: ${{ secrets.WALLET_PASSWORD_TESTNET }}
+
+      - name: Build
+        run: yarn workspaces foreach -Rpt -v --from '@lace/nami' run build
+
+      - name: Chromatic packages-nami
+        uses: ./.github/actions/chromatic
+        with:
+          DIR: packages/nami
+          NAME: packages-nami
+          TOKEN: ${{ secrets.CHROMATIC_LACE_NAMI_TOKEN }}

.github/workflows/ci.yml

@@ -71,6 +71,12 @@ jobs:
           DIR: packages/staking
           NAME: packages-staking
 
+      - name: Build nami
+        uses: ./.github/actions/build/package
+        with:
+          DIR: packages/nami
+          NAME: packages-nami
+
   unitTests:
     name: Unit tests
     runs-on: ubuntu-20.04
@@ -116,6 +122,12 @@ jobs:
           name: packages-staking
           path: packages/staking/dist
 
+      - name: Download packages-nami
+        uses: actions/download-artifact@v4
+        with:
+          name: packages-nami
+          path: packages/nami/dist
+
       - name: Collect Workflow Telemetry Unit Tests
         uses: catchpoint/workflow-telemetry-action@v2
         with:
@@ -169,6 +181,12 @@ jobs:
           name: packages-staking
           path: packages/staking/dist
 
+      - name: Download packages-nami
+        uses: actions/download-artifact@v4
+        with:
+          name: packages-nami
+          path: packages/nami/dist
+
       - name: Collect Workflow Telemetry Smoke Tests
         uses: catchpoint/workflow-telemetry-action@v2
         with:

.gitignore

@@ -34,3 +34,5 @@ result
 !.yarn/releases
 !.yarn/sdks
 !.yarn/versions
+
+yalc.lock

apps/browser-extension-wallet/package.json

@@ -47,19 +47,22 @@
     "@cardano-sdk/input-selection": "0.13.19",
     "@cardano-sdk/tx-construction": "0.21.4",
     "@cardano-sdk/util": "0.15.5",
+    "@cardano-sdk/util-rxjs": "0.7.32",
     "@cardano-sdk/wallet": "0.44.3",
     "@cardano-sdk/web-extension": "0.34.2",
     "@emurgo/cip14-js": "~3.0.1",
     "@input-output-hk/lace-ui-toolkit": "1.21.0",
     "@lace/cardano": "0.1.0",
     "@lace/common": "0.1.0",
     "@lace/core": "0.1.0",
+    "@lace/nami": "^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",
     "@shiroyasha9/axios-fetch-adapter": "^1.0.3",
+    "@xsy/nami-migration-tool": "file:./xsy-nami-migration-tool-0.0.39.tgz",
     "antd": "^4.24.10",
     "are-you-es5": "^2.1.2",
     "bignumber.js": "9.0.1",
@@ -90,7 +93,7 @@
     "react-router-dom": "5.2.0",
     "readable-stream": "^3.6.0",
     "rxjs": "7.4.0",
-    "webextension-polyfill": "0.8.0",
+    "webextension-polyfill": "0.10.0",
     "zustand": "3.5.14"
   },
   "devDependencies": {
@@ -106,13 +109,13 @@
     "@types/text-encoding-utf-8": "^1",
     "@types/uuid": "^8.3.4",
     "@types/w3c-web-hid": "^1.0.3",
-    "@types/webextension-polyfill": "0.8.0",
+    "@types/webextension-polyfill": "0.10.0",
     "dotenv-defaults": "5.0.2",
     "dotenv-webpack": "8.0.1",
     "eslint-plugin-prettier": "^4.0.0",
     "fake-indexeddb": "3.1.3",
     "fork-ts-checker-webpack-plugin": "^7.2.1",
-    "jest-webextension-mock": "^3.7.19",
+    "jest-webextension-mock": "^3.9.0",
     "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/MainMenu/DropdownMenuOverlay/components/WalletAccounts.tsx

@@ -236,14 +236,16 @@ export const WalletAccounts = ({ isPopup, onBack }: { isPopup: boolean; onBack:
 
   const renameAccount = useCallback(
     async (newAccountName: string) => {
+      const account = wallet.accounts.find(({ accountIndex }) => accountIndex === editAccountDrawer.data.accountNumber);
+
       await walletRepository.updateAccountMetadata({
         walletId: wallet.walletId,
         accountIndex: editAccountDrawer.data.accountNumber,
-        metadata: { name: newAccountName }
+        metadata: { ...account?.metadata, name: newAccountName }
       });
       editAccountDrawer.hide();
     },
-    [walletRepository, wallet.walletId, editAccountDrawer]
+    [walletRepository, wallet.walletId, editAccountDrawer, wallet.accounts]
   );
 
   return (

apps/browser-extension-wallet/src/config.ts

@@ -25,6 +25,7 @@ export type Config = {
   CEXPLORER_BASE_URL: Record<EnvironmentTypes, string>;
   CEXPLORER_URL_PATHS: CExplorerUrlPaths;
   SAVED_PRICE_DURATION: number;
+  DEFAULT_SUBMIT_API: string;
 };
 
 // eslint-disable-next-line complexity
@@ -94,6 +95,7 @@ export const config = (): Config => {
     },
     SAVED_PRICE_DURATION: !Number.isNaN(Number(process.env.SAVED_PRICE_DURATION_IN_MINUTES))
       ? Number(process.env.SAVED_PRICE_DURATION_IN_MINUTES)
-      : 720
+      : 720,
+    DEFAULT_SUBMIT_API: 'http://localhost:8090/api/submit/tx'
   };
 };

apps/browser-extension-wallet/src/features/delegation/stores/createDelegationStore.ts

@@ -63,7 +63,7 @@ DelegationStore): stakePoolDetailsSelectorProps => {
  */
 export const useDelegationStore = create<DelegationStore>((set) => ({
   delegationTxFee: '0',
-  setSelectedStakePool: (pool: CardanoStakePool) => set({ selectedStakePool: pool }),
+  setSelectedStakePool: (pool: CardanoStakePool | undefined) => set({ selectedStakePool: pool }),
   setDelegationTxBuilder: (txBuilder?: TxBuilder) => set({ delegationTxBuilder: txBuilder }),
   setDelegationTxFee: (fee?: string) => set({ delegationTxFee: fee })
 }));

apps/browser-extension-wallet/src/features/nami-migration/Activating.tsx

@@ -0,0 +1,53 @@
+import React, { useEffect } from 'react';
+
+import { NamiMigrationUpdatingYourWallet } from '@lace/core';
+import { consumeRemoteApi, RemoteApiPropertyType } from '@cardano-sdk/web-extension';
+import { NamiMigrationAPI, NamiMigrationChannels } from '@lib/scripts/background/nami-migration';
+import { runtime } from 'webextension-polyfill';
+import { useHistory } from 'react-router-dom';
+import { walletRoutePaths as routes } from '@routes/wallet-paths';
+import { useCurrencyStore } from '@providers/currency';
+import { MigrationState } from '@xsy/nami-migration-tool/dist/migrator/migration-state.data';
+import { useTheme } from '@providers/ThemeProvider/context';
+
+const namiMigrationRemoteApi = consumeRemoteApi<Pick<NamiMigrationAPI, 'startMigration' | 'checkMigrationStatus'>>(
+  {
+    baseChannel: NamiMigrationChannels.MIGRATION,
+    properties: {
+      startMigration: RemoteApiPropertyType.MethodReturningPromise,
+      checkMigrationStatus: RemoteApiPropertyType.MethodReturningPromise
+    }
+  },
+  {
+    logger: console,
+    runtime
+  }
+);
+
+export const Activating = (): JSX.Element => {
+  const history = useHistory();
+  const { setFiatCurrency } = useCurrencyStore();
+  const { setTheme } = useTheme();
+
+  useEffect(() => {
+    const startMigration = async () => {
+      const migrationStatus = await namiMigrationRemoteApi.checkMigrationStatus();
+
+      if (migrationStatus !== MigrationState.InProgress && migrationStatus !== MigrationState.Completed) {
+        history.push(routes.namiMigration.welcome);
+        return;
+      }
+
+      const result = await namiMigrationRemoteApi.startMigration();
+      const namiTheme = result.themeColor === 'light' ? 'light' : 'dark';
+
+      setTheme(namiTheme);
+      setFiatCurrency(result.currency);
+      history.push(routes.namiMigration.welcome);
+    };
+
+    startMigration();
+  }, [setFiatCurrency, history, setTheme]);
+
+  return <NamiMigrationUpdatingYourWallet />;
+};

apps/browser-extension-wallet/src/features/nami-migration/AllDone.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+import { AllDone as View } from '@lace/core';
+
+export const AllDone = (): JSX.Element => (
+  <View
+    onClose={() => {
+      window.close();
+    }}
+  />
+);

apps/browser-extension-wallet/src/features/nami-migration/Customize.tsx

@@ -0,0 +1,60 @@
+import React, { useEffect } from 'react';
+
+import { Customize as View } from '@lace/core';
+import nami from '@assets/videos/nami.mp4';
+import lace from '@assets/videos/lace.mp4';
+import { useHistory } from 'react-router-dom';
+import { walletRoutePaths } from '@routes';
+import { setBackgroundStorage } from '@lib/scripts/background/storage';
+import { useAnalyticsContext } from '@providers';
+import { postHogNamiMigrationActions } from '@providers/AnalyticsProvider/analyticsTracker';
+
+export const Customize = (): JSX.Element => {
+  const history = useHistory();
+  const analytics = useAnalyticsContext();
+
+  useEffect(() => {
+    analytics.sendEventToPostHog(postHogNamiMigrationActions.onboarding.CUSTOMIZE_STEP);
+  }, [analytics]);
+
+  const completeMigrationAndRedirect = async (mode: 'lace' | 'nami') => {
+    await (mode === 'lace'
+      ? analytics.sendEventToPostHog(postHogNamiMigrationActions.onboarding.CUSTOMIZE_STEP_LACE_MODE_CLICK)
+      : analytics.sendEventToPostHog(postHogNamiMigrationActions.onboarding.CUSTOMIZE_STEP_NAMI_MODE_CLICK));
+    await analytics.sendEventToPostHog(postHogNamiMigrationActions.onboarding.MIGRATION_COMPLETE);
+
+    // Actually complete migration
+    await setBackgroundStorage({
+      namiMigration: {
+        completed: true,
+        mode
+      }
+    });
+
+    if (mode === 'lace') {
+      history.push(walletRoutePaths.assets);
+    } else {
+      history.push(walletRoutePaths.namiMigration.allDone);
+    }
+  };
+
+  const onModeChange = (mode: 'lace' | 'nami') => {
+    if (mode === 'lace') {
+      analytics.sendEventToPostHog(postHogNamiMigrationActions.onboarding.CUSTOMIZE_STEP_LACE_TAB_CLICK);
+    } else {
+      analytics.sendEventToPostHog(postHogNamiMigrationActions.onboarding.CUSTOMIZE_STEP_NAMI_TAB_CLICK);
+    }
+  };
+
+  return (
+    <View
+      onChange={onModeChange}
+      onBack={() => history.goBack()}
+      onDone={completeMigrationAndRedirect}
+      videosURL={{
+        lace,
+        nami
+      }}
+    />
+  );
+};

apps/browser-extension-wallet/src/features/nami-migration/NamiMigration.tsx

@@ -0,0 +1,36 @@
+import React, { useEffect } from 'react';
+import { walletRoutePaths } from '@routes';
+import { Route, Switch } from 'react-router-dom';
+import { Activating } from './Activating';
+import { Welcome } from './Welcome';
+import { Customize } from './Customize';
+import { AllDone } from './AllDone';
+import { WalletSetupLayout } from '@views/browser/components';
+import { Portal } from '@views/browser/features/wallet-setup/components/Portal';
+import { useAnalyticsContext } from '@providers';
+import { postHogNamiMigrationActions } from '@providers/AnalyticsProvider/analyticsTracker';
+
+const urlPath = walletRoutePaths.namiMigration;
+
+export const NamiMigration = (): JSX.Element => {
+  const analytics = useAnalyticsContext();
+
+  useEffect(() => {
+    analytics.sendEventToPostHog(postHogNamiMigrationActions.onboarding.OPEN);
+  }, [analytics]);
+
+  return (
+    <Portal>
+      <WalletSetupLayout>
+        <Switch>
+          <>
+            <Route path={urlPath.activating} component={Activating} />
+            <Route path={urlPath.welcome} component={Welcome} />
+            <Route path={urlPath.customize} component={Customize} />
+            <Route path={urlPath.allDone} component={AllDone} />
+          </>
+        </Switch>
+      </WalletSetupLayout>
+    </Portal>
+  );
+};