Merge pull request #778 from near/dev

v8.0.0 Release (dev -> main)

README.md

@@ -30,7 +30,7 @@ NEAR Wallet Selector makes it easy for users to interact with your dApp by provi
 
 ## Installation and Usage
 
-The easiest way to use NEAR Wallet Selector is to install the [`core`](https://www.npmjs.com/package/@near-wallet-selector/core) package from the NPM registry, some packages may require `near-api-js` v0.44.2 or above check them at [`packages`](./packages)
+The easiest way to use NEAR Wallet Selector is to install the [`core`](https://www.npmjs.com/package/@near-wallet-selector/core) package from the NPM registry, some packages may require `near-api-js` v1.0.0 or above check them at [`packages`](./packages)
 
 ```bash
 # Using Yarn

examples/react/components/ExportContent.tsx

@@ -3,10 +3,10 @@ import { Fragment } from "react";
 import { useExportAccountSelector } from "../contexts/WalletSelectorExportContext";
 
 const ExportContent: NextPage = () => {
-  const { ExportModal } = useExportAccountSelector();
+  const { exportModal } = useExportAccountSelector();
   return (
     <Fragment>
-      <button onClick={() => ExportModal.show()}>Open Modal</button>
+      <button onClick={() => exportModal.show()}>Open Modal</button>
       <p>
         The Export Accounts modal assists users in migrating their accounts to
         any Wallet Selector wallet supporting account imports. Any sensitive

examples/react/contexts/WalletSelectorContext.tsx

@@ -17,7 +17,13 @@ import { setupNearSnap } from "@near-wallet-selector/near-snap";
 import { setupWelldoneWallet } from "@near-wallet-selector/welldone-wallet";
 import { setupXDEFI } from "@near-wallet-selector/xdefi";
 import type { ReactNode } from "react";
-import React, { useCallback, useContext, useEffect, useState } from "react";
+import React, {
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+  useMemo,
+} from "react";
 import { distinctUntilChanged, map } from "rxjs";
 
 import { setupNeth } from "@near-wallet-selector/neth";
@@ -51,6 +57,7 @@ export const WalletSelectorContextProvider: React.FC<{
   const [selector, setSelector] = useState<WalletSelector | null>(null);
   const [modal, setModal] = useState<WalletSelectorModal | null>(null);
   const [accounts, setAccounts] = useState<Array<AccountState>>([]);
+  const [loading, setLoading] = useState<boolean>(true);
 
   const init = useCallback(async () => {
     const _selector = await setupWalletSelector({
@@ -103,11 +110,14 @@ export const WalletSelectorContextProvider: React.FC<{
     const state = _selector.store.getState();
     setAccounts(state.accounts);
 
+    // this is added for debugging purpose only
+    // for more information (https://github.com/near/wallet-selector/pull/764#issuecomment-1498073367)
     window.selector = _selector;
     window.modal = _modal;
 
     setSelector(_selector);
     setModal(_modal);
+    setLoading(false);
   }, []);
 
   useEffect(() => {
@@ -141,24 +151,24 @@ export const WalletSelectorContextProvider: React.FC<{
       subscription.unsubscribe();
       onHideSubscription.remove();
     };
-  }, [selector]);
+  }, [selector, modal]);
+
+  const walletSelectorContextValue = useMemo<WalletSelectorContextValue>(
+    () => ({
+      selector: selector!,
+      modal: modal!,
+      accounts,
+      accountId: accounts.find((account) => account.active)?.accountId || null,
+    }),
+    [selector, modal, accounts]
+  );
 
-  if (!selector || !modal) {
+  if (loading) {
     return <Loading />;
   }
 
-  const accountId =
-    accounts.find((account) => account.active)?.accountId || null;
-
   return (
-    <WalletSelectorContext.Provider
-      value={{
-        selector,
-        modal,
-        accounts,
-        accountId,
-      }}
-    >
+    <WalletSelectorContext.Provider value={walletSelectorContextValue}>
       {children}
     </WalletSelectorContext.Provider>
   );

examples/react/contexts/WalletSelectorExportContext.tsx

@@ -1,5 +1,11 @@
 import type { ReactNode } from "react";
-import React, { useCallback, useContext, useEffect, useState } from "react";
+import React, {
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+  useMemo,
+} from "react";
 import { map, distinctUntilChanged } from "rxjs";
 import { setupWalletSelector } from "@near-wallet-selector/core";
 import type { WalletSelector, AccountState } from "@near-wallet-selector/core";
@@ -24,13 +30,13 @@ import { setupLedger } from "@near-wallet-selector/ledger";
 declare global {
   interface Window {
     importSelector: WalletSelector;
-    ExportModal: WalletSelectorModal;
+    exportModal: WalletSelectorModal;
   }
 }
 
 interface ExportAccountSelectorContextValue {
   importSelector: WalletSelector;
-  ExportModal: WalletSelectorModal;
+  exportModal: WalletSelectorModal;
   accounts: Array<AccountState>;
   accountId: string | null;
 }
@@ -42,8 +48,9 @@ export const ExportAccountSelectorContextProvider: React.FC<{
   children: ReactNode;
 }> = ({ children }) => {
   const [importSelector, setSelector] = useState<WalletSelector | null>(null);
-  const [ExportModal, setModal] = useState<WalletSelectorModal | null>(null);
+  const [modal, setModal] = useState<WalletSelectorModal | null>(null);
   const [accounts, setAccounts] = useState<Array<AccountState>>([]);
+  const [loading, setLoading] = useState<boolean>(true);
 
   const init = useCallback(async () => {
     const _selector = await setupWalletSelector({
@@ -95,11 +102,14 @@ export const ExportAccountSelectorContextProvider: React.FC<{
     const state = _selector.store.getState();
     setAccounts(state.accounts);
 
+    // this is added for debugging purpose only
+    // for more information (https://github.com/near/wallet-selector/pull/764#issuecomment-1498073367)
     window.importSelector = _selector;
-    window.ExportModal = _modal;
+    window.exportModal = _modal;
 
     setSelector(_selector);
     setModal(_modal);
+    setLoading(false);
   }, []);
 
   useEffect(() => {
@@ -126,21 +136,25 @@ export const ExportAccountSelectorContextProvider: React.FC<{
     return () => subscription.unsubscribe();
   }, [importSelector]);
 
-  if (!importSelector || !ExportModal) {
+  const exportWalletSelectorContextValue =
+    useMemo<ExportAccountSelectorContextValue>(
+      () => ({
+        importSelector: importSelector!,
+        exportModal: modal!,
+        accounts,
+        accountId:
+          accounts.find((account) => account.active)?.accountId || null,
+      }),
+      [importSelector, modal, accounts]
+    );
+
+  if (loading) {
     return <Loading />;
   }
 
-  const accountId =
-    accounts.find((account) => account.active)?.accountId || null;
-
   return (
     <ExportAccountSelectorContext.Provider
-      value={{
-        importSelector,
-        ExportModal,
-        accounts,
-        accountId,
-      }}
+      value={exportWalletSelectorContextValue}
     >
       {children}
     </ExportAccountSelectorContext.Provider>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "near-wallet-selector",
-  "version": "7.9.3",
+  "version": "8.0.0",
   "description": "NEAR Wallet Selector makes it easy for users to interact with your dApp by providing an abstraction over various wallets within the NEAR ecosystem",
   "keywords": [
     "near",
@@ -101,8 +101,9 @@
     "core-js": "^3.6.5",
     "crypto-browserify": "^3.12.0",
     "ethers": "^5.7.2",
+    "https-browserify": "^1.0.0",
     "is-mobile": "^3.1.1",
-    "near-api-js": "^1.1.0",
+    "near-api-js": "^2.1.0",
     "near-seed-phrase": "^0.2.0",
     "next": "12.2.3",
     "ngx-deploy-npm": "^4.3.10",
@@ -113,9 +114,11 @@
     "regenerator-runtime": "0.13.11",
     "rxjs": "^7.8.0",
     "stream-browserify": "^3.0.0",
+    "stream-http": "^3.2.0",
     "tslib": "^2.3.0",
     "tweetnacl": "^1.0.3",
     "tweetnacl-util": "^0.15.1",
+    "url": "^0.11.0",
     "zone.js": "~0.11.4"
   },
   "devDependencies": {

packages/account-export/README.md

@@ -43,6 +43,7 @@ modal.show();
 - `accounts` (`Array`): List of objects with an account id and its private key to be exported.
 - `theme` (`Theme?`): Specify light/dark theme for UI. Defaults to the browser configuration when omitted or set to 'auto'. This can be either `light`, `dark` or `auto`.
 - `description` (`string?`): Define a custom description in the UI.
+- `onComplete` (`(accounts: Array<string>) => void`): Triggers when the user completes the flow. By default it is not set.
 
 ## Styles & Customizing CSS
 

packages/account-export/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@near-wallet-selector/account-export",
-  "version": "7.9.3",
+  "version": "8.0.0",
   "description": "This is the Export Selector UI package for NEAR Wallet Selector.",
   "keywords": [
     "near",
@@ -21,6 +21,6 @@
   },
   "homepage": "https://github.com/near/wallet-selector/tree/magin/packages/account-export",
   "peerDependencies": {
-    "near-api-js": "^0.44.2 || ^1.0.0"
+    "near-api-js": "^1.0.0 || ^2.0.0"
   }
 }

packages/coin98-wallet/README.md

@@ -4,7 +4,7 @@ Coin98 Wallet [Coin98 Wallet](https://chrome.google.com/webstore/detail/coin98-w
 
 ## Installation
 
-This package requires `near-api-js` v0.44.2 or above:
+This package requires `near-api-js` v1.0.0 or above:
 
 ```bash
 # Using Yarn
@@ -43,6 +43,7 @@ const selector = await setupWalletSelector({
 ## Options
 
 - `iconUrl`: (`string?`): Icon is optional. Default image point to Coin98 Wallet Logo in base64 format.
+- `deprecated`: (`boolean?`): Deprecated is optional. Default is `false`.
 
 ## License
 

packages/coin98-wallet/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@near-wallet-selector/coin98-wallet",
-  "version": "7.9.3",
+  "version": "8.0.0",
   "description": "Coin 98 wallet package for NEAR Wallet Selector.",
   "keywords": [
     "near",
@@ -22,6 +22,6 @@
   },
   "homepage": "https://github.com/near/wallet-selector/tree/main/packages/coin98-wallet",
   "peerDependencies": {
-    "near-api-js": "^0.44.2 || ^1.0.0"
+    "near-api-js": "^1.0.0 || ^2.0.0"
   }
 }

packages/core/README.md

@@ -4,7 +4,7 @@ This is the core package for NEAR Wallet Selector.
 
 ## Installation and Usage
 
-The easiest way to use this package is to install it from the NPM registry, this package requires `near-api-js` v0.44.2 or above:
+The easiest way to use this package is to install it from the NPM registry, this package requires `near-api-js` v1.0.0 or above:
 
 ```bash
 # Using Yarn

packages/core/docs/api/selector.md

@@ -12,6 +12,7 @@
 - `debug` (`boolean`): Whether internal logging is enabled.
 - `optimizeWalletOrder` (`boolean`): Whether wallet order optimization is enabled.
 - `randomizeWalletOrder` (`boolean`): Weather wallet order randomization is enabled.
+- `languageCode` (`string?`): ISO 639-1 two-letter language code.
 **Description**
 
 Resolved variation of the options passed to `setupWalletSelector`.

packages/core/docs/guides/custom-wallets.md

@@ -22,7 +22,7 @@ const MyWallet: WalletBehaviourFactory<BrowserWallet> = ({
   options,
   provider,
 }) => {
-  // Initialise wallet-sepecific client(s) here.
+  // Initialise wallet-specific client(s) here.
 
   return {
     async signIn({ contractId, methodNames }) {
@@ -41,6 +41,16 @@ const MyWallet: WalletBehaviourFactory<BrowserWallet> = ({
       return [];
     },
 
+    async verifyOwner({ message }) {
+      const signature = provider.signMessage(message);
+
+      return {
+        ...data,
+        signature: Buffer.from(signature.signature).toString("base64"),
+        keyType: signature.publicKey.keyType,
+      }; // Promise<VerifiedOwner>
+    },
+
     async signAndSendTransaction({ signerId, receiverId, actions }) {
       // Sign a list of NEAR Actions before sending via an RPC endpoint.
       // An RPC provider is injected to make this process easier and configured based on options.network.
@@ -92,20 +102,21 @@ export function setupMyWallet({
 
 A variation of `WalletModule` is added to state during setup under `modules` (`ModuleState`) and accessed by the UI to display the available wallets. It's important that `id` is unique to avoid conflicts with other wallets installed by a dApp. The `type` property is coupled to the parameter we pass to `WalletModuleFactory` and `WalletBehaviourFactory`.
 
-Although we've tried to implement a polymorphic approach to wallets, there are some differences between wallet types that means your implementation won't always mirror other wallets such as Sender vs. Ledger. There are currently four types of wallet:
+Although we've tried to implement a polymorphic approach to wallets, there are some differences between wallet types that means your implementation won't always mirror other wallets such as Sender vs. Ledger. There are currently five types of wallet:
 
-- `BrowserWallet`: NEAR Wallet
-- `InjectedWallet`: Sender & Math Wallet
-- `HardwareWallet`: Ledger
-- `BridgeWallet`: WalletConnect
+- `BrowserWallet`
+- `InjectedWallet`
+- `HardwareWallet`
+- `BridgeWallet`
+- `InstantLinkWallet`
 
 ## Methods
 
 ### `signIn`
 
 This method handles access to accounts via `FunctionCall` access keys. It's important that at least one account is returned to be in a signed in state.
 
-> Note: Hardware wallets require `derivationPaths`.
+> Note: Hardware wallets require `accounts`.
 
 ### `signOut`
 
@@ -115,6 +126,10 @@ This method handles signing out from accounts and cleanup such as event listener
 
 This method returns the current list of accounts we have access to. When no accounts are returned, the wallet is considered to be in a signed out state.
 
+### `verifyOwner`
+
+Signs the message and verifies the owner. Message is not sent to blockchain.
+
 ### `signAndSendTransaction`
 
 This method signs a list of NEAR Actions before sending via an RPC endpoint. The implementation can differ widely based on how much the wallet you're integrating does for you. At a minimum the wallet must be able to sign a message.

packages/core/docs/guides/multilanguage-support.md

@@ -1,7 +1,7 @@
-# Multilanguage support
+# Multi-language support
 
 - Languages are detected from browser language settings.
-- If user preffered language is not supported, english is rendered as default.
+- If user preferred language is not supported, english is rendered as default.
 
 ## Supported languages
 

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@near-wallet-selector/core",
-  "version": "7.9.3",
+  "version": "8.0.0",
   "description": "This is the core package for NEAR Wallet Selector.",
   "keywords": [
     "near",
@@ -20,6 +20,6 @@
   },
   "homepage": "https://github.com/near/wallet-selector/tree/main/packages/core",
   "peerDependencies": {
-    "near-api-js": "^0.44.2 || ^1.0.0"
+    "near-api-js": "^1.0.0 || ^2.0.0"
   }
 }