Additional tooling (#1459)

* feat: nami mode dapp connector

* feat(extension): conditional inject based on wallet mode (#91)

Implements LW-11590 and LW-11630

* chore: resolve sonarcloud issues

* fixup! feat(extension): conditional inject based on wallet mode (#91)

* fixup! feat: nami mode dapp connector

* feat(extension): collateral logic

* fixup! feat: nami mode dapp connector

* fixup! feat: nami mode dapp connector

* chore: bump sdk version

* fix: hardware wallet integration

* fix: banner display condition and popup size

* chore: resolve ci issues

* chore: fix ui discrepancies

* fixup! fix: hardware wallet integration

* fixup! fixup! fix: hardware wallet integration

* feat(nami): await posthog events that occur before window.close

Window.close could occur before the posthog event
is sent. Await on sending the event before closing
the window.

* fixup! chore: resolve ci issues

* fixup! fix: banner display condition and popup size

* fixup! fix: hardware wallet integration

* fixup! fix: banner display condition and popup size

* fix(extension): debounce on CIP-30 endpoint calls now starts after first event (#1458)

* fix(extension): debounce on CIP-30 endpoint calls now starts after first event
* perf: optimize loading states in Dapp connector views
* chore: separate dapp view
* feat: optimize loading states in Dapp connector views

---------

Co-authored-by: Przemysław Włodek <przem.wlodek.github@gmail.com>
Co-authored-by: Mircea Hasegan <mircea.hasegan@iohk.io>
Co-authored-by: vetalcore <vetalcore@gmail.com>

* fix: improve error handling for hardware wallet

* fixup! fix: hardware wallet integration

* chore: extract more tools (#1461)

* chore: extract more tools

* chore: update assets

* fix: preserve location

* fix: hide show recovery phrase setting

* fix: [LW-11665] dApp connector proportions for hardware wallets (#1467)

* fix: change password flow (#1466)

* fix: change password flow

* chore: fix tests

* chore(extension): ensure tabs are closed (#1464)

* fix: delete wallet from popup (#1465)

* chore: update copy

* chore: remove tslint issues

* chore: resolve sonarcloud issues

* fix: correct copy paste error for extension IDs

* fix: scrollbar ref potentially not active

* fix: metadata controlled input lag

* chore: fix get collateral utxo test

* fix: collateral confirmation toast

* fix(nami): tx collateral inputs must be part of marked collaterals

* fix: handle server urls

* fix: fix unresponsive send page on metadata update with multiple assets

* chore: update switch to nami mode copies

* fix: store recent addresses per env name for send flow

* fix: resolve eslint/tslint fixes commit comments

* chore: update switch to nami mode copies

* chore: add missing dependencies into dapp connector view

* feat: show asset info in assets modal

* fix: redirect to trezor sign page

* fix: allow additional properties while sending events to posthog

* chore: fix tslint issues

* fix: fix change password flow

* chore: fix tslint issues

* fix: refresh tx history if new tx appears

* fix: cache address and balance per env name

* chore(nami): add missing typings

* fix: reset states after submitting tx with trezor

* fix: close all lace windows before executing migration

* fix: show tx history of multi-delegated accounts

* feat(nami): implement migration guard on popup

- only complete migration via explicit complete in final onboarding step

* fix: show all accounts of all hw instead of just a first one

* fixup! feat: show asset info in assets modal

* fix: use explicit bigint conversion in both sides of abs function

* fix: use explicit bigint conversion in both sides of abs function

* refactor: address sonarlint issues

* fix: update account tests

* fixup! fix(nami): tx collateral inputs must be part of marked collaterals

* fix: remove second scrollbar in history tab

* refactor: remove dead code

* feat(nami): send analytic event for trezor dapp tx sign

* fix: add analytic event for ledger send tx

* fix(nami): asset meatadata with bigint values

* fix: add send transaction confirmation click event for trezor

* fix: open HWFlow modal if wallet type is hardware

* fix(nami): compute datumHash if contract

* fix: nami package storybook

* fix: confirm modal event capture

relative paths need to be used

* fix(nami): broken HW connect UI (#1476)

---------

Co-authored-by: Mircea Hasegan <mircea.hasegan@iohk.io>
Co-authored-by: Angel Castillo <angel.castillo@iohk.io>
Co-authored-by: Przemysław Włodek <przem.wlodek.github@gmail.com>
Co-authored-by: John Oshalusi <john.oshalusi@iohk.io>
Co-authored-by: Michael Chappell <7581002+mchappell@users.noreply.github.com>

Author: 6 people

apps/browser-extension-wallet/.env.defaults

@@ -81,6 +81,8 @@ CEXPLORER_URL_SANCHONET=https://sancho.cexplorer.io
 
 # Manifest.json
 LACE_EXTENSION_KEY=gafhhkghbfjjkeiendhlofajokpaflmk
+LACE_EXTENSION_ID=gafhhkghbfjjkeiendhlofajokpaflmk
+NAMI_EXTENSION_ID=lpfcbjknijpeeillifnkikgncikgfhdo
 
 # Extension uninstall redirect
 LACE_EXTENSION_UNINSTALL_REDIRECT_URL=https://forms.gle/XNcPfWafY8XgxkYw7

apps/browser-extension-wallet/.env.developerpreview

@@ -81,6 +81,8 @@ CEXPLORER_URL_SANCHONET=https://sancho.cexplorer.io
 
 # Manifest.json
 LACE_EXTENSION_KEY=djcdfchkaijggdjokfomholkalbffgil
+LACE_EXTENSION_ID=djcdfchkaijggdjokfomholkalbffgil
+NAMI_EXTENSION_ID=djcdfchkaijggdjokfomholkalbffgil
 
 # Extension uninstall redirect
 LACE_EXTENSION_UNINSTALL_REDIRECT_URL=

apps/browser-extension-wallet/.env.example

@@ -79,6 +79,8 @@ CEXPLORER_URL_SANCHONET=https://sancho.cexplorer.io
 
 # Manifest.json
 LACE_EXTENSION_KEY=gafhhkghbfjjkeiendhlofajokpaflmk
+LACE_EXTENSION_ID=gafhhkghbfjjkeiendhlofajokpaflmk
+NAMI_EXTENSION_ID=gafhhkghbfjjkeiendhlofajokpaflmk
 
 # Midnight
 MIDNIGHT_EVENT_BANNER_REMINDER_TIME=129600000

apps/browser-extension-wallet/package.json

@@ -62,7 +62,6 @@
     "@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",

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

@@ -15,7 +15,7 @@ export const UserAvatar = ({ walletName, isPopup, avatar }: UserAvatarProps): Re
     {avatar ? (
       <Image src={avatar} className={styles.userAvatarImage} preview={false} />
     ) : (
-      <span>{walletName && walletName[0]?.toUpperCase()}</span>
+      <span>{walletName?.[0]?.toUpperCase()}</span>
     )}
   </div>
 );

apps/browser-extension-wallet/src/dapp-connector.tsx

@@ -5,43 +5,63 @@ import { StoreProvider } from '@stores';
 import '@lib/i18n';
 import 'antd/dist/antd.css';
 import { CurrencyStoreProvider } from '@providers/currency';
-import { DatabaseProvider, AppSettingsProvider, AnalyticsProvider } from '@providers';
+import { DatabaseProvider, AppSettingsProvider, AnalyticsProvider, ExternalLinkOpenerProvider } from '@providers';
 import { HashRouter } from 'react-router-dom';
 import { ThemeProvider } from '@providers/ThemeProvider';
 import { UIThemeProvider } from '@providers/UIThemeProvider';
 import { BackgroundServiceAPIProvider } from '@providers/BackgroundServiceAPI';
-import { APP_MODE_POPUP } from './utils/constants';
+import { APP_MODE_POPUP, POPUP_WINDOW_NAMI_TITLE } from './utils/constants';
 import { PostHogClientProvider } from '@providers/PostHogClientProvider';
 import { ExperimentsProvider } from '@providers/ExperimentsProvider/context';
 import { AddressesDiscoveryOverlay } from 'components/AddressesDiscoveryOverlay';
+import { useEffect, useState } from 'react';
+import { getBackgroundStorage } from '@lib/scripts/background/storage';
+import { NamiDappConnector } from './views/nami-mode/indexInternal';
 
-const App = (): React.ReactElement => (
-  <BackgroundServiceAPIProvider>
-    <AppSettingsProvider>
-      <DatabaseProvider>
-        <StoreProvider appMode={APP_MODE_POPUP}>
-          <CurrencyStoreProvider>
-            <HashRouter>
-              <PostHogClientProvider>
-                <ExperimentsProvider>
-                  <AnalyticsProvider>
-                    <ThemeProvider>
-                      <AddressesDiscoveryOverlay>
-                        <UIThemeProvider>
-                          <DappConnectorView />
-                        </UIThemeProvider>
-                      </AddressesDiscoveryOverlay>
-                    </ThemeProvider>
-                  </AnalyticsProvider>
-                </ExperimentsProvider>
-              </PostHogClientProvider>
-            </HashRouter>
-          </CurrencyStoreProvider>
-        </StoreProvider>
-      </DatabaseProvider>
-    </AppSettingsProvider>
-  </BackgroundServiceAPIProvider>
-);
+const App = (): React.ReactElement => {
+  const [mode, setMode] = useState<'lace' | 'nami'>();
+  useEffect(() => {
+    const getWalletMode = async () => {
+      const { namiMigration } = await getBackgroundStorage();
+      if (namiMigration?.mode === 'nami') {
+        document.title = POPUP_WINDOW_NAMI_TITLE;
+      }
+      setMode(namiMigration?.mode || 'lace');
+    };
+
+    getWalletMode();
+  }, []);
+
+  return (
+    <BackgroundServiceAPIProvider>
+      <AppSettingsProvider>
+        <DatabaseProvider>
+          <StoreProvider appMode={APP_MODE_POPUP}>
+            <CurrencyStoreProvider>
+              <HashRouter>
+                <PostHogClientProvider>
+                  <ExperimentsProvider>
+                    <AnalyticsProvider>
+                      <ThemeProvider>
+                        <ExternalLinkOpenerProvider>
+                          <AddressesDiscoveryOverlay>
+                            <UIThemeProvider>
+                              {mode === 'nami' ? <NamiDappConnector /> : <DappConnectorView />}
+                            </UIThemeProvider>
+                          </AddressesDiscoveryOverlay>
+                        </ExternalLinkOpenerProvider>
+                      </ThemeProvider>
+                    </AnalyticsProvider>
+                  </ExperimentsProvider>
+                </PostHogClientProvider>
+              </HashRouter>
+            </CurrencyStoreProvider>
+          </StoreProvider>
+        </DatabaseProvider>
+      </AppSettingsProvider>
+    </BackgroundServiceAPIProvider>
+  );
+};
 
 const mountNode = document.querySelector('#lace-popup');
 render(<App />, mountNode);

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

@@ -148,29 +148,30 @@ export const DappCollateralContainer = (): React.ReactElement => {
     }
   }, [redirectToCreateFailure]);
 
-  if (!isCalculatingCollateral) {
-    if (insufficientBalance) {
-      return <InsufficientFunds />;
-    } else if (lockableUtxos.length > 0 && isInstanceOfCollateralInfoWithCollateralAmount(collateralInfo)) {
-      return (
-        <DappSetCollateral
-          dappInfo={dappInfo}
-          collateralInfo={collateralInfo}
-          reject={reject}
-          confirm={() => confirmCollateral(lockableUtxos)}
-        />
-      );
-    }
-    // Allow user to create tx to set collateral
+  if (isCalculatingCollateral || !inMemoryWallet) {
+    return <MainLoader text={t('dapp.collateral.calculating')} />;
+  }
+
+  if (insufficientBalance) {
+    return <InsufficientFunds />;
+  } else if (lockableUtxos.length > 0 && isInstanceOfCollateralInfoWithCollateralAmount(collateralInfo)) {
     return (
-      <CreateCollateral
+      <DappSetCollateral
         dappInfo={dappInfo}
         collateralInfo={collateralInfo}
-        confirm={(utxos: Wallet.Cardano.Utxo[]) => confirmCollateral(utxos)}
         reject={reject}
+        confirm={() => confirmCollateral(lockableUtxos)}
       />
     );
   }
 
-  return <MainLoader text={t('dapp.collateral.calculating')} />;
+  // Allow user to create tx to set collateral
+  return (
+    <CreateCollateral
+      dappInfo={dappInfo}
+      collateralInfo={collateralInfo}
+      confirm={(utxos: Wallet.Cardano.Utxo[]) => confirmCollateral(utxos)}
+      reject={reject}
+    />
+  );
 };

apps/browser-extension-wallet/src/features/dapp/components/confirm-transaction/ConfirmTransaction.tsx

@@ -27,7 +27,7 @@ export const ConfirmTransaction = (): React.ReactElement => {
     setDappInfo,
     signTxRequest: { request: req, set: setSignTxRequest }
   } = useViewsFlowContext();
-  const { walletType, isHardwareWallet } = useWalletStore();
+  const { walletType, isHardwareWallet, walletInfo, inMemoryWallet } = useWalletStore();
   const analytics = useAnalyticsContext();
   const [confirmTransactionError] = useState(false);
   const disallowSignTx = useDisallowSignTx(req);
@@ -83,7 +83,7 @@ export const ConfirmTransaction = (): React.ReactElement => {
 
   return (
     <Layout layoutClassname={cn(confirmTransactionError && styles.layoutError)} pageClassname={styles.spaceBetween}>
-      {req ? <DappTransactionContainer /> : <Skeleton loading />}
+      {req && walletInfo && inMemoryWallet ? <DappTransactionContainer /> : <Skeleton loading />}
       {!confirmTransactionError && (
         <div className={styles.actions}>
           <Button

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

@@ -7,7 +7,7 @@ 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 { MigrationState } from './migration-tool/migrator/migration-state.data';
 import { useTheme } from '@providers/ThemeProvider/context';
 
 const namiMigrationRemoteApi = consumeRemoteApi<Pick<NamiMigrationAPI, 'startMigration' | 'checkMigrationStatus'>>(

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

@@ -8,6 +8,7 @@ import { walletRoutePaths } from '@routes';
 import { setBackgroundStorage } from '@lib/scripts/background/storage';
 import { useAnalyticsContext } from '@providers';
 import { postHogNamiMigrationActions } from '@providers/AnalyticsProvider/analyticsTracker';
+import * as laceMigrationClient from '@src/features/nami-migration/migration-tool/cross-extension-messaging/lace-migration-client.extension';
 
 export const Customize = (): JSX.Element => {
   const history = useHistory();
@@ -31,6 +32,8 @@ export const Customize = (): JSX.Element => {
       }
     });
 
+    laceMigrationClient.completeMigration();
+
     if (mode === 'lace') {
       history.push(walletRoutePaths.assets);
     } else {