Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Add Nightly Wallet to Selector #314

Merged
merged 12 commits into from
Jun 14, 2022
4 changes: 4 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ yarn add \
@near-wallet-selector/math-wallet \
@near-wallet-selector/ledger \
@near-wallet-selector/wallet-connect
@near-wallet-selector/nightly

# Using NPM.
npm install \
Expand All @@ -47,6 +48,7 @@ npm install \
@near-wallet-selector/math-wallet \
@near-wallet-selector/ledger \
@near-wallet-selector/wallet-connect
@near-wallet-selector/nightly
```

Optionally, you can install our [`modal-ui`](https://www.npmjs.com/package/@near-wallet-selector/modal-ui) package for a pre-built interface that wraps the `core` API and presents the supported wallets:
Expand All @@ -70,6 +72,7 @@ import { setupSender } from "@near-wallet-selector/sender";
import { setupMathWallet } from "@near-wallet-selector/math-wallet";
import { setupLedger } from "@near-wallet-selector/ledger";
import { setupWalletConnect } from "@near-wallet-selector/wallet-connect";
import { setupNightly } from "@near-wallet-selector/nightly";

const selector = await setupWalletSelector({
network: "testnet",
Expand All @@ -79,6 +82,7 @@ const selector = await setupWalletSelector({
setupSender(),
setupLedger(),
setupMathWallet(),
setupNightly(),
setupWalletConnect({
projectId: "c4f79cc...",
metadata: {
Expand Down
5 changes: 5 additions & 0 deletions examples/angular/project.json
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,11 @@
"input": "packages/sender/assets/",
"output": "assets/"
},
{
"glob": "**/*",
"input": "packages/nightly/assets/",
"output": "assets/"
},
{
"glob": "**/*",
"input": "packages/ledger/assets/",
Expand Down
5 changes: 5 additions & 0 deletions examples/react/project.json
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,11 @@
"input": "packages/sender/assets/",
"output": "assets/"
},
{
"glob": "**/*",
"input": "packages/nightly/assets/",
"output": "assets/"
},
{
"glob": "**/*",
"input": "packages/ledger/assets/",
Expand Down
4 changes: 2 additions & 2 deletions examples/react/src/contexts/WalletSelectorContext.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand Down Expand Up @@ -68,6 +69,7 @@ export const WalletSelectorContextProvider: React.FC = ({ children }) => {
setupNearWallet(),
setupMyNearWallet(),
setupSender(),
setupNightly(),
setupMathWallet(),
setupLedger(),
setupWalletConnect({
Expand All @@ -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;
Expand Down
2 changes: 2 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
"near-wallet",
"my-near-wallet",
"sender",
"nightly",
"math-wallet",
"ledger",
"wallet-connect"
Expand Down Expand Up @@ -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",
Expand Down
8 changes: 6 additions & 2 deletions packages/modal-ui/src/lib/components/WalletOptions.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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)
lewis-sqa marked this conversation as resolved.
Show resolved Hide resolved
: handleWalletClick(module)
}
>
<div title={description || ""}>
<img src={iconUrl} alt={name} />
Expand Down
3 changes: 3 additions & 0 deletions packages/nightly/.babelrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"presets": [["@nrwl/web/babel", { "useBuiltIns": "usage" }]]
}
18 changes: 18 additions & 0 deletions packages/nightly/.eslintrc.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
{
"extends": ["../../.eslintrc.json"],
"ignorePatterns": ["!**/*"],
"overrides": [
{
"files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
"rules": {}
},
{
"files": ["*.ts", "*.tsx"],
"rules": {}
},
{
"files": ["*.js", "*.jsx"],
"rules": {}
}
]
}
54 changes: 54 additions & 0 deletions packages/nightly/README.md
Original file line number Diff line number Diff line change
@@ -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).
Binary file added packages/nightly/assets/nightly.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
14 changes: 14 additions & 0 deletions packages/nightly/jest.config.js
Original file line number Diff line number Diff line change
@@ -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",
};
4 changes: 4 additions & 0 deletions packages/nightly/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
{
"name": "@near-wallet-selector/nightly",
"version": "4.0.0"
}
54 changes: 54 additions & 0 deletions packages/nightly/project.json
Original file line number Diff line number Diff line change
@@ -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"]
}
2 changes: 2 additions & 0 deletions packages/nightly/src/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
export { setupNightly } from "./lib/nightly";
export type { NightlyWalletParams } from "./lib/nightly";
45 changes: 45 additions & 0 deletions packages/nightly/src/lib/injected-nightly.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
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 interface NightlyAccount {
accountId: string;
publicKey: NearPublicKey;
}
export interface NearNightly {
account: NightlyAccount;
connected: boolean;
signTransaction: (
transaction: NearTransaction
) => Promise<NearSignedTransaction>;
signAllTransactions: (
transaction: Array<NearTransaction>
) => Promise<Array<NearSignedTransaction>>;
connect: (
onDisconnect?: () => void,
eagerConnect?: boolean
) => Promise<NightlyAccount>;
disconnect: () => Promise<void>;
}
export interface InjectedNightly {
near: NearNightly;
invalidate: () => void;
}
Loading