Merge pull request #960 from near/dev

v8.5.4 Release (dev -> main)

.github/release-drafter.yml

@@ -19,6 +19,10 @@ categories:
       - 'perf'
       - 'test'
       - 'build'
+
+exclude-labels:
+  - 'skip-changelog'
+
 template: |
   ## Changelog
   $CHANGES

examples/README.md

@@ -0,0 +1,21 @@
+# Near Wallet Selector Examples
+
+This folder contains two example projects that demonstrate how to integrate Near Wallet Selector to React and Angular applications. 
+
+## Structure
+
+- **`angular/`**: Angular Example
+  - An Angular example project demonstrating the integration of the Near Wallet Selector.
+
+- **`react/`**: React Example
+  - A React example project demonstrating the integration of the Near Wallet Selector.
+
+## Getting Started
+
+Follow the individual README files in each project directory (`react/` or `angular/`) to get started with these examples:
+
+- [Angular Example README](./angular/README.md)
+- [React Example README](./react/README.md)
+
+
+Feel free to explore these examples to understand how to integrate Near Wallet Selector to your React and Angular projects. If you have any questions or need help, please refer to the README files in each project folder or reach out for help.

examples/angular/README.md

@@ -0,0 +1,34 @@
+# Near Wallet Selector Angular Example
+
+This Angular example shows how to integrate Near Wallet Selector into your Angular application for easy Near wallet integration.
+# Usage
+
+Start the development server:
+```bash
+yarn nx serve angular
+```
+
+Open your web browser and navigate to http://localhost:4200/wallet-selector to see the Angular example in action.
+
+You should be able to interact with the Near Wallet Selector within the example application.
+
+## Folder Structure
+
+The folder structure of this Angular project is organized to maintain a clean codebase. Below is an overview of the major directories and their purposes:
+
+- **`src/`**: This is the root directory for your Angular application.
+  - **`app/`**: Contains the core application components and modules.
+    - **`components/`**: Custom Angular components used in the application like `content`, `form`, `loading`, `messages` and `sign-in`.
+    - **`pages/`**: Wallet Selector and Wallet-selector export has been integrated into this folder.
+      - **`wallet-selector/`**: Wallet Selector integration.
+      - **`wallet-selector-export/`**: Wallet Selector Export integration.
+  - **`environments/`**: Environment configuration files.
+
+- **`.eslintrc.json`**: ESLint configuration for code linting.
+- **`jest.config.ts`**: Configuration file for Jest.
+- **`project.json`**: Project configuration file.
+- **`README.md`**: The file you are currently reading, providing project documentation.
+- **`tsconfig.app.json`**: TypeScript configuration to Angular application.
+- **`tsconfig.editor.json`**: TypeScript configuration for code editor.
+- **`tsconfig.json`**: The root TypeScript configuration file.
+

examples/react/README.md

@@ -0,0 +1,30 @@
+# Near Wallet Selector React Example
+
+This React example shows how to integrate Near Wallet Selector into your React application for easy Near wallet integration.
+
+# Usage
+
+Start the development server:
+```bash
+yarn nx serve react
+```
+
+Open your web browser and navigate to http://localhost:4200/ to see the React example in action.
+
+You should be able to interact with the Near Wallet Selector within the example application.
+
+## Folder Structure
+
+The folder structure of this React project is organized to maintain a clean codebase. Below is an overview of the major directories and their purposes:
+
+- **`components/`**: Contains custom React components used in the application like `Content`, `ExportContent`, `Form`, `Loading`, `Messages`, `SignIn`.
+- **`contexts/`**: Wallet Selector and Wallet-selector export has been integrated into this folder.
+    - **`WalletSelectorContext/`**: Wallet Selector integration.
+    - **`WalletSelectorExportContext/`**: Wallet Selector Export integration.
+- **`pages/`**: Main app pages.
+
+- **`.eslintrc.json`**: ESLint configuration for code linting.
+- **`.babelrc`**: Babel configuration file for transpiling JavaScript/TypeScript code.
+- **`project.json`**: Project configuration file.
+- **`README.md`**: The file you are currently reading, providing project documentation.
+- **`tsconfig.json`**: The root TypeScript configuration file.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "near-wallet-selector",
-  "version": "8.5.3",
+  "version": "8.5.4",
   "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",
@@ -96,7 +96,7 @@
     "@ramper/near": "^0.0.30",
     "@walletconnect/modal": "^2.6.0",
     "@walletconnect/sign-client": "2.9.1",
-    "better-sqlite3": "^8.5.2",
+    "better-sqlite3": "^8.7.0",
     "big.js": "^6.1.1",
     "bn.js": "^5.2.0",
     "borsh": "^0.7.0",
@@ -163,7 +163,7 @@
     "@testing-library/react-hooks": "^7.0.2",
     "@types/big.js": "^6.2.0",
     "@types/bn.js": "^5.1.1",
-    "@types/gh-pages": "^3.2.1",
+    "@types/gh-pages": "^3.2.2",
     "@types/jest": "29.4.4",
     "@types/node": "18.11.9",
     "@types/qrcode": "^1.5.1",

packages/account-export/README.md

@@ -43,14 +43,15 @@ 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.
+- `onComplete` (`({ accounts: Array<string>, walletName: string }) => void`): Triggers when the user completes the flow. By default it is not set.
 
 ### Supported Wallets
- - [Nightly Wallet](https://github.com/near/wallet-selector/blob/main/packages/nightly/src/lib/nightly.ts#L224)
- - [Meteor Wallet](https://github.com/near/wallet-selector/blob/main/packages/meteor-wallet/src/lib/meteor-wallet.ts#L204)
- - [Welldone Wallet](https://github.com/near/wallet-selector/blob/main/packages/welldone-wallet/src/lib/welldone.ts#L335)
- - [Here Wallet](https://github.com/near/wallet-selector/blob/main/packages/here-wallet/src/lib/selector.ts#LL42)
- - [My Near Wallet](https://github.com/near/wallet-selector/blob/main/packages/my-near-wallet/src/lib/my-near-wallet.ts#L227)
+ - [Nightly Wallet](https://github.com/near/wallet-selector/blob/main/packages/nightly/src/lib/nightly.ts)
+ - [Meteor Wallet](https://github.com/near/wallet-selector/blob/main/packages/meteor-wallet/src/lib/meteor-wallet.ts)
+ - [Welldone Wallet](https://github.com/near/wallet-selector/blob/main/packages/welldone-wallet/src/lib/welldone.ts)
+ - [Here Wallet](https://github.com/near/wallet-selector/blob/main/packages/here-wallet/src/lib/selector.ts)
+ - [My Near Wallet](https://github.com/near/wallet-selector/blob/main/packages/my-near-wallet/src/lib/my-near-wallet.ts)
+ - [Sender Wallet](https://github.com/near/wallet-selector/blob/main/packages/sender/src/lib/sender.ts)
 
 ## Styles & Customizing CSS
 

packages/account-export/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@near-wallet-selector/account-export",
-  "version": "8.5.3",
+  "version": "8.5.4",
   "description": "This is the Export Selector UI package for NEAR Wallet Selector.",
   "keywords": [
     "near",

packages/coin98-wallet/README.md

@@ -28,9 +28,9 @@ npm install @near-wallet-selector/coin98-wallet
 import { setupWalletSelector } from "@near-wallet-selector/core";
 import { setupCoin98Wallet } from "@near-wallet-selector/coin98-wallet";
 
-// Coin98 Wallet for Wallet Selector can be setup without any params or it can take one optional param.
+// Coin98 Wallet for Wallet Selector can be setup without any params or it can take few optional params, see options below.
 const coin98Wallet = setupCoin98Wallet({
-  iconUrl: "https://<Your Icon URL here>"
+  iconUrl: "https://<Wallet Icon URL Here>" // optional
 });
 
 

packages/coin98-wallet/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@near-wallet-selector/coin98-wallet",
-  "version": "8.5.3",
+  "version": "8.5.4",
   "description": "Coin 98 wallet package for NEAR Wallet Selector.",
   "keywords": [
     "near",

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

@@ -20,7 +20,7 @@
 
 ## How to use
 
-- Language files are located in locale folder in `packages\core\src\lib\locale`
+- Language files are located in locale folder [here](https://github.com/near/wallet-selector/tree/main/packages/core/src/lib/locale)
 - In order for text to be translated `translate` function should be used
   as in example below
 - Can be extended when needed following `packageName.section.translationKey`structure
@@ -55,7 +55,7 @@
 
 ## Adding new language
 
-- Language files are located in locale folder in `packages\core\src\lib\locale`
+- Language files are located in locale folder [here](https://github.com/near/wallet-selector/tree/main/packages/core/src/lib/locale)
 - Files are named after ISO 639-1: two-letter language code
 - Keys are named in camelCase as the beginning of the string always in English, with the following pattern used :
 
@@ -69,7 +69,7 @@
   }
   ```
 
-- When new language is introduced it must be added to `packages\core\src\lib\translate\translate.ts`
+- When new language is introduced it must be added to [translate.ts](https://github.com/near/wallet-selector/tree/main/packages/core/src/lib/translate/translate.ts) file.
 
   ```ts
   import en from "../locale/en.json";
@@ -92,7 +92,7 @@
   ```
 
 - Supported language should be added to **Supported
-  Languages** [list](https://github.com/near/wallet-selector/blob/dev/packages/core/docs/guides/multilanguage-support.md#supported-languages) and type list
+  Languages** [list](#supported-languages) and type list
   .
 
 - Pull request title should be named as **"Add support for `LanguageName` language"**.

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@near-wallet-selector/core",
-  "version": "8.5.3",
+  "version": "8.5.4",
   "description": "This is the core package for NEAR Wallet Selector.",
   "keywords": [
     "near",

packages/core/src/index.ts

@@ -80,6 +80,7 @@ export {
   isCurrentBrowserSupported,
   verifyFullKeyBelongsToUser,
   verifySignature,
+  serializeNep413,
 } from "./lib/helpers";
 
 export { translate, allowOnlyLanguage } from "./lib/translate/translate";

packages/core/src/lib/helpers/index.ts

@@ -2,3 +2,4 @@ export * from "./waitFor";
 export * from "./getActiveAccount";
 export * from "./detect-browser";
 export * from "./verify-signature/verify-signature";
+export * from "./verify-signature/payload";

packages/core/src/lib/helpers/verify-signature/payload.ts

@@ -1,4 +1,5 @@
 import type { SignMessageParams } from "../../wallet";
+import { serialize } from "borsh";
 
 export class Payload {
   tag: number;
@@ -41,3 +42,10 @@ export const payloadSchema = new Map([
     },
   ],
 ]);
+
+export const serializeNep413 = (
+  signMessageParams: SignMessageParams
+): Buffer => {
+  const payload = new Payload({ ...signMessageParams });
+  return Buffer.from(serialize(payloadSchema, payload));
+};

packages/default-wallets/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@near-wallet-selector/default-wallets",
-  "version": "8.5.3",
+  "version": "8.5.4",
   "description": "Default wallets package for NEAR Wallet Selector.",
   "keywords": [
     "near",

packages/finer-wallet/README.md

@@ -20,10 +20,10 @@ Then use it in your dApp:
 import { setupWalletSelector } from "@near-wallet-selector/core";
 import { setupFinerWallet } from "@near-wallet-selector/finer-wallet";
 
-// FiNER Wallet for Wallet Selector can be setup without any params or it can take two optional params.
+// FiNER Wallet for Wallet Selector can be setup without any params or it can take few optional params, see options below.
 const nearWallet = setupFinerWallet({
   walletUrl: "finer://wallet.testnet.near.org",
-  iconUrl: "https://yourdomain.com/yourwallet-icon.png"
+  iconUrl: "https://<Wallet Icon URL Here>" // optional
 });
 
 const selector = await setupWalletSelector({

packages/finer-wallet/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@near-wallet-selector/finer-wallet",
-  "version": "8.5.3",
+  "version": "8.5.4",
   "description": "FiNER Wallet package for NEAR Wallet Selector.",
   "keywords": [
     "near",

packages/here-wallet/README.md

@@ -28,9 +28,14 @@ Then use it in your dApp:
 import { setupWalletSelector } from "@near-wallet-selector/core";
 import { setupHereWallet } from "@near-wallet-selector/here-wallet";
 
+// HERE Wallet for Wallet Selector can be setup without any params or it can take few optional params, see options below.
+const hereWallet = setupHereWallet({
+  iconUrl: "https://<Wallet Icon URL Here>" // optional
+});
+
 const selector = await setupWalletSelector({
   network: "testnet",
-  modules: [setupHereWallet()],
+  modules: [hereWallet],
 });
 ```
 

packages/here-wallet/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@near-wallet-selector/here-wallet",
-  "version": "8.5.3",
+  "version": "8.5.4",
   "description": "Here wallet package for NEAR Wallet Selector.",
   "keywords": [
     "near",

packages/ledger/README.md

@@ -27,9 +27,9 @@ Then use it in your dApp:
 import { setupWalletSelector } from "@near-wallet-selector/core";
 import { setupLedger } from "@near-wallet-selector/ledger";
 
-// Ledger for Wallet Selector can be setup without any params or it can take one optional param.
+// Ledger for Wallet Selector can be setup without any params or it can take few optional params, see options below.
 const ledger = setupLedger({
-  iconUrl: "https://yourdomain.com/yourwallet-icon.png"
+  iconUrl: "https://<Wallet Icon URL Here>" // optional
 });
 
 const selector = await setupWalletSelector({

packages/ledger/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@near-wallet-selector/ledger",
-  "version": "8.5.3",
+  "version": "8.5.4",
   "description": "Ledger package for NEAR Wallet Selector.",
   "keywords": [
     "near",

packages/math-wallet/README.md

@@ -28,9 +28,9 @@ Then use it in your dApp:
 import { setupWalletSelector } from "@near-wallet-selector/core";
 import { setupMathWallet } from "@near-wallet-selector/math-wallet";
 
-// Math Wallet for Wallet Selector can be setup without any params or it can take one optional param.
+// Math Wallet for Wallet Selector can be setup without any params or it can take few optional params, see options below.
 const mathWallet = setupMathWallet({
-  iconUrl: "https://yourdomain.com/yourwallet-icon.png"
+  iconUrl: "https://<Wallet Icon URL Here>" // optional
 });
 
 const selector = await setupWalletSelector({

packages/math-wallet/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@near-wallet-selector/math-wallet",
-  "version": "8.5.3",
+  "version": "8.5.4",
   "description": "Math wallet package for NEAR Wallet Selector.",
   "keywords": [
     "near",

packages/meteor-wallet/README.md

@@ -27,9 +27,9 @@ Then use it in your dApp:
 import { setupWalletSelector } from "@near-wallet-selector/core";
 import { setupMeteorWallet } from "@near-wallet-selector/meteor-wallet";
 
-// Meteor for Wallet Selector can be setup without any params or it can take one optional param.
+// Meteor for Wallet Selector can be setup without any params or it can take few optional params, see options below.
 const meteorWallet = setupMeteorWallet({
-  iconUrl: "https://yourdomain.com/yourwallet-icon.png" //optional
+  iconUrl: "https://<Wallet Icon URL Here>" // optional
 });
 
 const selector = await setupWalletSelector({

packages/meteor-wallet/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@near-wallet-selector/meteor-wallet",
-  "version": "8.5.3",
+  "version": "8.5.4",
   "description": "Meteor wallet package for NEAR Wallet Selector.",
   "keywords": [
     "near",

packages/modal-ui-js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@near-wallet-selector/modal-ui-js",
-  "version": "8.5.3",
+  "version": "8.5.4",
   "description": "Modal UI package for NEAR wallet Selector",
   "keywords": [
     "near",

packages/modal-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@near-wallet-selector/modal-ui",
-  "version": "8.5.3",
+  "version": "8.5.4",
   "description": "Modal UI package for NEAR wallet Selector",
   "keywords": [
     "near",

packages/my-near-wallet/README.md

@@ -27,10 +27,10 @@ Then use it in your dApp:
 import { setupWalletSelector } from "@near-wallet-selector/core";
 import { setupMyNearWallet } from "@near-wallet-selector/my-near-wallet";
 
-// My NEAR Wallet for Wallet Selector can be setup without any params or it can take two optional params.
+// My NEAR Wallet for Wallet Selector can be setup without any params or it can take few optional params, see options below.
 const myNearWallet = setupMyNearWallet({
   walletUrl: "https://testnet.mynearwallet.com",
-  iconUrl: "https://yourdomain.com/yourwallet-icon.png"
+  iconUrl: "https://<Wallet Icon URL Here>" // optional
 });
 
 const selector = await setupWalletSelector({

packages/my-near-wallet/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@near-wallet-selector/my-near-wallet",
-  "version": "8.5.3",
+  "version": "8.5.4",
   "description": "My Near Wallet package for NEAR Wallet Selector.",
   "keywords": [
     "near",