feat: Update HERE Wallet and add topLevelInjected

package.json

@@ -84,7 +84,7 @@
     "@angular/platform-browser": "15.2.9",
     "@angular/platform-browser-dynamic": "15.2.9",
     "@angular/router": "15.2.9",
-    "@here-wallet/core": "^1.5.1",
+    "@here-wallet/core": "^1.6.6",
     "@jscutlery/semver": "3.1.0",
     "@ledgerhq/hw-transport": "6.30.3",
     "@ledgerhq/hw-transport-webhid": "6.28.3",

packages/core/docs/api/wallet.md

@@ -63,7 +63,16 @@ There are four wallet types:
 
 **Description**
 
-Returns meta information about the wallet such as `name`, `description`, `iconUrl` , `deprecated` and `available` but can include wallet-specific properties such as `downloadUrl` and `useUrlAccountImport` for injected wallets or `contractId`,  `runOnStartup` for instant-link wallets and `walletUrl` for browser wallets.
+Returns meta information about the wallet such as `name`, `description`, `iconUrl` , `deprecated` and `available` but can include wallet-specific properties such as `downloadUrl`, `useUrlAccountImport` and `topLevelInjected` for injected wallets or `contractId`,  `runOnStartup` for instant-link wallets and `walletUrl` for browser wallets.
+
+- `name`: Displayed in modal-ui as wallet name
+- `description`: Displayed in modal-ui as wallet description
+- `iconUrl`: Displayed in modal-ui as wallet icon
+- `deprecated`: Makes the wallet unselectable via modal-ui
+- `available`: Makes the wallet unselectable via modal-ui, use if the wallet cannot be selected in the user's environment.
+- `downloadUrl`: Link to download injected wallet, available via modal-ui
+- `useUrlAccountImport`: If `true`, then this injected wallet supports @account-export api and will be available in the account export modal window
+- `topLevelInjected`: If the value `true` is passed for an injected wallet, modal-ui will call the signIn method of this wallet immediately upon initializing setupModal. This will allow wallet applications that open the dApp in the internal browser to immediately log in with the user's wallet.
 
 **Example**
 

packages/core/src/lib/wallet/wallet.types.ts

@@ -258,6 +258,7 @@ export type BrowserWallet = BaseWallet<
 
 export type InjectedWalletMetadata = BaseWalletMetadata & {
   downloadUrl: string;
+  topLevelInjected?: boolean;
   useUrlAccountImport?: boolean;
 };
 

packages/here-wallet/src/lib/index.ts

@@ -1,4 +1,8 @@
-import type { HereProvider, HereStrategy } from "@here-wallet/core";
+import {
+  waitInjectedHereWallet,
+  type HereProvider,
+  type HereStrategy,
+} from "@here-wallet/core";
 import type { WalletModuleFactory } from "@near-wallet-selector/core";
 import type { HereWallet } from "./types";
 import { initHereWallet } from "./selector";
@@ -20,6 +24,8 @@ export function setupHereWallet({
   defaultProvider,
 }: Options = {}): WalletModuleFactory<HereWallet> {
   return async () => {
+    const isInjected = await waitInjectedHereWallet;
+
     return {
       id: "here-wallet",
       type: "injected",
@@ -28,6 +34,7 @@ export function setupHereWallet({
         description: "Mobile wallet for NEAR Protocol",
         useUrlAccountImport: true,
         downloadUrl: "https://herewallet.app",
+        topLevelInjected: isInjected != null,
         iconUrl,
         deprecated,
         available: true,

packages/here-wallet/src/lib/selector.ts

@@ -1,5 +1,5 @@
 import type { NetworkId } from "@near-wallet-selector/core";
-import { HereWallet } from "@here-wallet/core";
+import { HereWallet, waitInjectedHereWallet } from "@here-wallet/core";
 import type BN from "bn.js";
 
 import type { SelectorInit } from "./types";
@@ -66,8 +66,11 @@ export const initHereWallet: SelectorInit = async (config) => {
     async signIn(data) {
       logger.log("HereWallet:signIn");
 
-      const contractId = data.contractId !== "" ? data.contractId : undefined;
-      await here.signIn({ ...data, contractId: contractId });
+      const isInjected = await waitInjectedHereWallet;
+      if (!isInjected) {
+        const contractId = data.contractId !== "" ? data.contractId : undefined;
+        await here.signIn({ ...data, contractId: contractId });
+      }
 
       emitter.emit("signedIn", {
         contractId: data.contractId,
@@ -101,12 +104,8 @@ export const initHereWallet: SelectorInit = async (config) => {
       logger.log("HereWallet:signAndSendTransaction", data);
 
       const { contract } = store.getState();
-      if (!here.isSignedIn || !contract) {
-        throw new Error("Wallet not signed in");
-      }
-
       return await here.signAndSendTransaction({
-        receiverId: contract.contractId,
+        receiverId: contract?.contractId,
         ...data,
       });
     },

packages/modal-ui-js/src/lib/modal.ts

@@ -54,6 +54,24 @@ export const setupModal = (
 ): WalletSelectorModal => {
   const emitter = new EventEmitter<ModalEvents>();
 
+  selector.store.getState().modules.forEach(async (module) => {
+    if ("topLevelInjected" in module.metadata) {
+      if (!module.metadata.topLevelInjected) {
+        return;
+      }
+
+      const wallet = await module.wallet();
+      if (wallet.type !== "injected") {
+        return;
+      }
+
+      await wallet.signIn({
+        contractId: options.contractId,
+        methodNames: options.methodNames,
+      });
+    }
+  });
+
   modalState = {
     container: document.getElementById(MODAL_ELEMENT_ID)!,
     selector,

packages/modal-ui/src/lib/modal.tsx

@@ -34,6 +34,24 @@ export const setupModal = (
 
   const emitter = new EventEmitter<ModalEvents>();
 
+  selector.store.getState().modules.forEach(async (module) => {
+    if ("topLevelInjected" in module.metadata) {
+      if (!module.metadata.topLevelInjected) {
+        return;
+      }
+
+      const wallet = await module.wallet();
+      if (wallet.type !== "injected") {
+        return;
+      }
+
+      await wallet.signIn({
+        contractId: options.contractId,
+        methodNames: options.methodNames,
+      });
+    }
+  });
+
   const render = (visible = false) => {
     root!.render(
       <Modal