feat: Add Nightly Wallet to Selector

examples/angular/project.json

@@ -33,6 +33,11 @@
             "input": "packages/sender/assets/",
             "output": "assets/"
           },
+          {
+            "glob": "**/*",
+            "input": "packages/nightly/assets/",
+            "output": "assets/"
+          },
           {
             "glob": "**/*",
             "input": "packages/ledger/assets/",

examples/react/project.json

@@ -33,6 +33,11 @@
             "input": "packages/sender/assets/",
             "output": "assets/"
           },
+          {
+            "glob": "**/*",
+            "input": "packages/nightly/assets/",
+            "output": "assets/"
+          },
           {
             "glob": "**/*",
             "input": "packages/ledger/assets/",

examples/react/src/components/Content.tsx

@@ -12,6 +12,7 @@ import { CONTRACT_ID } from "../constants";
 import SignIn from "./SignIn";
 import Form from "./Form";
 import Messages from "./Messages";
+import { InjectedWallet } from "@near-wallet-selector/core";
 
 const SUGGESTED_DONATION = "0";
 // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -24,6 +25,18 @@ const Content: React.FC = () => {
   const [messages, setMessages] = useState<Array<Message>>([]);
   const [loading, setLoading] = useState<boolean>(false);
 
+  // Try eager connect on app launch
+  useEffect(() => {
+    const eagerConnect = async () => {
+      const state = selector.store.getState();
+      if (state.selectedWalletId === "nightly") {
+        const wallet = (await selector.wallet()) as InjectedWallet;
+        wallet.signIn({ contractId: CONTRACT_ID });
+      }
+    };
+    eagerConnect();
+  }, []);
+
   const getAccount = useCallback(async (): Promise<Account | null> => {
     if (!accountId) {
       return null;

examples/react/src/contexts/WalletSelectorContext.tsx

@@ -9,6 +9,7 @@ import { setupMyNearWallet } from "@near-wallet-selector/my-near-wallet";
 import { setupSender } from "@near-wallet-selector/sender";
 import { setupMathWallet } from "@near-wallet-selector/math-wallet";
 import { setupLedger } from "@near-wallet-selector/ledger";
+import { setupNightly } from "@near-wallet-selector/nightly";
 import { setupWalletConnect } from "@near-wallet-selector/wallet-connect";
 import { CONTRACT_ID } from "../constants";
 
@@ -68,6 +69,7 @@ export const WalletSelectorContextProvider: React.FC = ({ children }) => {
         setupNearWallet(),
         setupMyNearWallet(),
         setupSender(),
+        setupNightly(),
         setupMathWallet(),
         setupLedger(),
         setupWalletConnect({
@@ -81,10 +83,8 @@ export const WalletSelectorContextProvider: React.FC = ({ children }) => {
         }),
       ],
     });
-
     const _modal = setupModal(_selector, { contractId: CONTRACT_ID });
     const state = _selector.store.getState();
-
     syncAccountState(localStorage.getItem("accountId"), state.accounts);
 
     window.selector = _selector;

package.json

@@ -12,6 +12,7 @@
     "near-wallet",
     "my-near-wallet",
     "sender",
+    "nightly",
     "math-wallet",
     "ledger",
     "wallet-connect"
@@ -39,6 +40,7 @@
     "build:near-wallet": "nx run-many --target=build --projects=near-wallet --configuration=production",
     "build:my-near-wallet": "nx run-many --target=build --projects=my-near-wallet --configuration=production",
     "build:sender": "nx run-many --target=build --projects=sender --configuration=production",
+    "build:nightly": "nx run-many --target=build --projects=nightly --configuration=production",
     "build:wallet-connect": "nx run-many --target=build --projects=wallet-connect --configuration=production",
     "build:wallet-utils": "nx run-many --target=build --projects=wallet-utils --configuration=production",
     "lint": "nx workspace-lint && nx run-many --target=lint --all --parallel",

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

@@ -76,13 +76,17 @@ export const WalletOptions: React.FC<WalletOptionsProps> = ({
             const { selectedWalletId } = selector.store.getState();
             const { name, description, iconUrl } = module.metadata;
             const selected = module.id === selectedWalletId;
-
             result.push(
               <li
                 key={module.id}
                 id={module.id}
                 className={selected ? "selected-wallet" : ""}
-                onClick={selected ? undefined : handleWalletClick(module)}
+                onClick={
+                  selected
+                    ? // This kinda broke for me if we dont have eager connect
+                      handleWalletClick(module)
+                    : handleWalletClick(module)
+                }
               >
                 <div title={description || ""}>
                   <img src={iconUrl} alt={name} />

packages/nightly/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": [["@nrwl/web/babel", { "useBuiltIns": "usage" }]]
+}

packages/nightly/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+  "extends": ["../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}

packages/nightly/README.md

@@ -0,0 +1,54 @@
+# @near-wallet-selector/nightly
+
+
+This is the [Nightly](https://chrome.google.com/webstore/detail/nightly/fiikommddbeccaoicoejoniammnalkfa) package for NEAR Wallet Selector.
+
+## Installation and Usage
+
+The easiest way to use this package is to install it from the NPM registry:
+
+```bash
+# Using Yarn
+yarn add @near-wallet-selector/nightly
+
+# Using NPM.
+npm install @near-wallet-selector/nightly
+```
+
+Then use it in your dApp:
+
+```ts
+import { setupWalletSelector } from "@near-wallet-selector/core";
+import { setupNightly } from "@near-wallet-selector/nightly";
+
+// Nightly for Wallet Selector can be setup without any params or it can take one optional param.
+const nightly = setupNightly({
+  iconUrl: "https://yourdomain.com/yourwallet-icon.png" //optional
+});
+
+const selector = await setupWalletSelector({
+  network: "testnet",
+  modules: [nightly],
+});
+```
+
+## Options
+
+- `iconUrl`: (`string?`): Image URL for the icon shown in the modal. This can also be a relative path or base64 encoded image. Defaults to `./assets/nightly-icon.png`.
+
+## Assets
+
+Assets such as icons can be found in the `/assets` directory of the package. Below is an example using Webpack:
+
+```ts
+import { setupNightly } from "@near-wallet-selector/nightly";
+import nightlyIconUrl from "@near-wallet-selector/nightly/assets/nightly.png";
+
+const nightly = setupNightly({
+  iconUrl: nightlyIconUrl
+});
+```
+
+## License
+
+This repository is distributed under the terms of both the MIT license and the Apache License (Version 2.0).

packages/nightly/jest.config.js

@@ -0,0 +1,14 @@
+module.exports = {
+  displayName: "nightly",
+  preset: "../../jest.preset.js",
+  globals: {
+    "ts-jest": {
+      tsconfig: "<rootDir>/tsconfig.spec.json",
+    },
+  },
+  transform: {
+    "^.+\\.[tj]sx?$": "ts-jest",
+  },
+  moduleFileExtensions: ["ts", "tsx", "js", "jsx"],
+  coverageDirectory: "../../coverage/packages/nightly",
+};

packages/nightly/package.json

@@ -0,0 +1,4 @@
+{
+  "name": "@near-wallet-selector/nightly",
+   "version": "4.0.0"
+}

packages/nightly/project.json

@@ -0,0 +1,54 @@
+{
+  "root": "packages/nightly",
+  "sourceRoot": "packages/nightly/src",
+  "projectType": "library",
+  "targets": {
+    "build": {
+      "executor": "@nrwl/web:rollup",
+      "outputs": ["{options.outputPath}"],
+      "options": {
+        "outputPath": "dist/packages/nightly",
+        "tsConfig": "packages/nightly/tsconfig.lib.json",
+        "project": "packages/nightly/package.json",
+        "entryFile": "packages/nightly/src/index.ts",
+        "buildableProjectDepsInPackageJsonType": "dependencies",
+        "compiler": "babel",
+        "format": ["esm", "umd", "cjs"],
+        "assets": [
+          {
+            "glob": "packages/nightly/README.md",
+            "input": ".",
+            "output": "."
+          },
+          {
+            "glob": "packages/nightly/assets/*",
+            "input": ".",
+            "output": "assets"
+          }
+        ]
+      }
+    },
+    "lint": {
+      "executor": "@nrwl/linter:eslint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": ["packages/nightly/**/*.ts"]
+      }
+    },
+    "test": {
+      "executor": "@nrwl/jest:jest",
+      "outputs": ["coverage/packages/nightly"],
+      "options": {
+        "jestConfig": "packages/nightly/jest.config.js",
+        "passWithNoTests": true
+      }
+    },
+    "deploy": {
+      "executor": "ngx-deploy-npm:deploy",
+      "options": {
+        "access": "public"
+      }
+    }
+  },
+  "tags": ["injected-wallet"]
+}

packages/nightly/src/index.ts

@@ -0,0 +1,2 @@
+export { setupNightly } from "./lib/nightly";
+export type { NightlyWalletParams } from "./lib/nightly";

packages/nightly/src/lib/injected-nightly.ts

@@ -0,0 +1,43 @@
+import {
+  SignedTransaction as NearSignedTransaction,
+  Transaction as NearTransaction,
+} from "near-api-js/lib/transaction";
+import { PublicKey as NearPublicKey } from "near-api-js/lib/utils";
+export interface NearAccount {
+  accountId: string;
+  publicKey: NearPublicKey;
+}
+export interface WalletAdapter {
+  account: NearAccount;
+  connected: boolean;
+  signTransaction: (
+    transaction: NearTransaction
+  ) => Promise<NearSignedTransaction>;
+  signAllTransactions: (
+    transaction: Array<NearTransaction>
+  ) => Promise<Array<NearSignedTransaction>>;
+  connect: (onDisconnect?: () => void) => Promise<NearAccount>;
+  disconnect: () => Promise<void>;
+}
+
+export declare class NightlyInjected {
+  near: NearNightly;
+  private readonly _nightlyEventsMap;
+  constructor();
+  invalidate(): void;
+}
+
+export declare class NearNightly {
+  account: NearAccount;
+  _onDisconnect: () => void;
+  private readonly _nightlyEventsMap;
+  constructor(eventMap: Map<string, (data: unknown) => unknown>);
+  connect(onDisconnect?: () => void): Promise<NearAccount>;
+  disconnect(): Promise<void>;
+  signTransaction: (
+    transaction: NearTransaction
+  ) => Promise<NearSignedTransaction>;
+  signAllTransactions: (
+    transaction: Array<NearTransaction>
+  ) => Promise<Array<NearSignedTransaction>>;
+}