From 040d7716c66392719d3710d7242eff0e70b216a2 Mon Sep 17 00:00:00 2001 From: prih Date: Thu, 29 Dec 2022 17:57:57 +0000 Subject: [PATCH 01/45] finer-wallet package --- packages/finer-wallet/.babelrc | 10 ++ packages/finer-wallet/.eslintrc.json | 18 +++ packages/finer-wallet/README.md | 55 +++++++++ .../finer-wallet/assets/finer-wallet-icon.png | Bin 0 -> 5811 bytes packages/finer-wallet/jest.config.js | 14 +++ packages/finer-wallet/jest.config.ts | 15 +++ packages/finer-wallet/package.json | 4 + packages/finer-wallet/project.json | 54 +++++++++ packages/finer-wallet/src/index.ts | 2 + packages/finer-wallet/src/lib/finer-wallet.ts | 107 ++++++++++++++++++ packages/finer-wallet/src/lib/icon.ts | 1 + packages/finer-wallet/tsconfig.json | 19 ++++ packages/finer-wallet/tsconfig.lib.json | 10 ++ packages/finer-wallet/tsconfig.spec.json | 15 +++ 14 files changed, 324 insertions(+) create mode 100644 packages/finer-wallet/.babelrc create mode 100644 packages/finer-wallet/.eslintrc.json create mode 100644 packages/finer-wallet/README.md create mode 100644 packages/finer-wallet/assets/finer-wallet-icon.png create mode 100644 packages/finer-wallet/jest.config.js create mode 100644 packages/finer-wallet/jest.config.ts create mode 100644 packages/finer-wallet/package.json create mode 100644 packages/finer-wallet/project.json create mode 100644 packages/finer-wallet/src/index.ts create mode 100644 packages/finer-wallet/src/lib/finer-wallet.ts create mode 100644 packages/finer-wallet/src/lib/icon.ts create mode 100644 packages/finer-wallet/tsconfig.json create mode 100644 packages/finer-wallet/tsconfig.lib.json create mode 100644 packages/finer-wallet/tsconfig.spec.json diff --git a/packages/finer-wallet/.babelrc b/packages/finer-wallet/.babelrc new file mode 100644 index 000000000..e24a5465f --- /dev/null +++ b/packages/finer-wallet/.babelrc @@ -0,0 +1,10 @@ +{ + "presets": [ + [ + "@nrwl/web/babel", + { + "useBuiltIns": "usage" + } + ] + ] +} diff --git a/packages/finer-wallet/.eslintrc.json b/packages/finer-wallet/.eslintrc.json new file mode 100644 index 000000000..9d9c0db55 --- /dev/null +++ b/packages/finer-wallet/.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": {} + } + ] +} diff --git a/packages/finer-wallet/README.md b/packages/finer-wallet/README.md new file mode 100644 index 000000000..a0b99d8b6 --- /dev/null +++ b/packages/finer-wallet/README.md @@ -0,0 +1,55 @@ +# @near-wallet-selector/finer-wallet + +This is the [FiNER Wallet](https://finerwallet.io/) 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/finer-wallet + +# Using NPM. +npm install @near-wallet-selector/finer-wallet +``` + +Then use it in your dApp: + +```ts +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. +const nearWallet = setupFinerWallet({ + walletUrl: "finer://wallet.testnet.near.org", + iconUrl: "https://yourdomain.com/yourwallet-icon.png" +}); + +const selector = await setupWalletSelector({ + network: "testnet", + modules: [nearWallet], +}); +``` + +## Options + +- `walletUrl` (`string?`): Wallet URL used to redirect when signing transactions. This parameter is required when using custom network configuration. +- `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/finer-wallet-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 { setupFinerWallet } from "@near-wallet-selector/finer-wallet"; +import nearWalletIconUrl from "@near-wallet-selector/finer-wallet/assets/finer-wallet-icon.png"; + +const nearWallet = setupFinerWallet({ + iconUrl: nearWalletIconUrl +}); +``` + +## License + +This repository is distributed under the terms of both the MIT license and the Apache License (Version 2.0). diff --git a/packages/finer-wallet/assets/finer-wallet-icon.png b/packages/finer-wallet/assets/finer-wallet-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..2d92de4ecc9942123a12e02be3ef2a8c2026e092 GIT binary patch literal 5811 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 Q@9(pjk%eKUflKs%04KnRG5`Po literal 0 HcmV?d00001 diff --git a/packages/finer-wallet/jest.config.js b/packages/finer-wallet/jest.config.js new file mode 100644 index 000000000..7e05d4d94 --- /dev/null +++ b/packages/finer-wallet/jest.config.js @@ -0,0 +1,14 @@ +module.exports = { + displayName: "finer-wallet", + preset: "../../jest.preset.js", + globals: { + "ts-jest": { + tsconfig: "/tsconfig.spec.json", + }, + }, + transform: { + "^.+\\.[tj]sx?$": "ts-jest", + }, + moduleFileExtensions: ["ts", "tsx", "js", "jsx"], + coverageDirectory: "../../coverage/packages/finer-wallet", +}; diff --git a/packages/finer-wallet/jest.config.ts b/packages/finer-wallet/jest.config.ts new file mode 100644 index 000000000..984ed8726 --- /dev/null +++ b/packages/finer-wallet/jest.config.ts @@ -0,0 +1,15 @@ +/* eslint-disable */ +export default { + displayName: "finer-wallet", + preset: "../../jest.preset.js", + globals: { + "ts-jest": { + tsconfig: "/tsconfig.spec.json", + }, + }, + transform: { + "^.+\\.[tj]s$": "ts-jest", + }, + moduleFileExtensions: ["ts", "tsx", "js", "jsx"], + coverageDirectory: "../../coverage/packages/finer-wallet", +}; diff --git a/packages/finer-wallet/package.json b/packages/finer-wallet/package.json new file mode 100644 index 000000000..942fe8278 --- /dev/null +++ b/packages/finer-wallet/package.json @@ -0,0 +1,4 @@ +{ + "name": "@near-wallet-selector/finer-wallet", + "version": "7.4.0" +} diff --git a/packages/finer-wallet/project.json b/packages/finer-wallet/project.json new file mode 100644 index 000000000..af2d67d7d --- /dev/null +++ b/packages/finer-wallet/project.json @@ -0,0 +1,54 @@ +{ + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "sourceRoot": "packages/finer-wallet/src", + "projectType": "library", + "targets": { + "build": { + "executor": "@nrwl/web:rollup", + "outputs": ["{options.outputPath}"], + "options": { + "outputPath": "dist/packages/finer-wallet", + "tsConfig": "packages/finer-wallet/tsconfig.lib.json", + "project": "packages/finer-wallet/package.json", + "entryFile": "packages/finer-wallet/src/index.ts", + "buildableProjectDepsInPackageJsonType": "dependencies", + "compiler": "babel", + "format": ["esm", "cjs"], + "assets": [ + { + "glob": "packages/finer-wallet/README.md", + "input": ".", + "output": "." + }, + { + "glob": "packages/finer-wallet/assets/*", + "input": ".", + "output": "assets" + } + ] + } + }, + "lint": { + "executor": "@nrwl/linter:eslint", + "outputs": ["{options.outputFile}"], + "options": { + "lintFilePatterns": ["packages/finer-wallet/**/*.ts"] + } + }, + "test": { + "executor": "@nrwl/jest:jest", + "outputs": ["coverage/packages/finer-wallet"], + "options": { + "jestConfig": "packages/finer-wallet/jest.config.ts", + "passWithNoTests": true + } + }, + "deploy": { + "executor": "ngx-deploy-npm:deploy", + "options": { + "access": "public" + } + } + }, + "tags": ["browser-wallet"] +} diff --git a/packages/finer-wallet/src/index.ts b/packages/finer-wallet/src/index.ts new file mode 100644 index 000000000..59206726c --- /dev/null +++ b/packages/finer-wallet/src/index.ts @@ -0,0 +1,2 @@ +export { setupFinerWallet } from "./lib/finer-wallet"; +export type { FinerWalletParams } from "./lib/finer-wallet"; diff --git a/packages/finer-wallet/src/lib/finer-wallet.ts b/packages/finer-wallet/src/lib/finer-wallet.ts new file mode 100644 index 000000000..8f0ef73cc --- /dev/null +++ b/packages/finer-wallet/src/lib/finer-wallet.ts @@ -0,0 +1,107 @@ +import { isMobile } from "is-mobile"; +import { waitFor } from "@near-wallet-selector/core"; +import type { + WalletModuleFactory, + BrowserWallet, + Network, + InjectedWallet, +} from "@near-wallet-selector/core"; +import type { MyNearWalletParams } from "@near-wallet-selector/my-near-wallet"; +import { setupMyNearWallet } from "@near-wallet-selector/my-near-wallet"; +import { setupSender } from "@near-wallet-selector/sender"; +import icon from "./icon"; + +export type FinerWalletParams = MyNearWalletParams; + +interface InjectedFiner { + near: { + isSender: boolean; + }; +} + +declare global { + interface Window { + finer: InjectedFiner | undefined; + } +} + +const resolveWalletUrl = (network: Network, walletUrl?: string) => { + if (walletUrl) { + return walletUrl; + } + + switch (network.networkId) { + case "mainnet": + return "https://near-wallet-api.finerwallet.io/mainnet"; + case "testnet": + return "https://near-wallet-api.finerwallet.io/testnet"; + default: + throw new Error("Invalid wallet url"); + } +}; + +const isInstalledExtension = () => { + return waitFor(() => !!window.finer?.near?.isSender).catch(() => false); +}; + +export function setupFinerWallet({ + walletUrl, + iconUrl = icon, + deprecated = false, +}: FinerWalletParams = {}): WalletModuleFactory< + BrowserWallet | InjectedWallet +> { + return async (options) => { + const mobile = isMobile(); + + if (mobile) { + const webWallet = await setupMyNearWallet({ + walletUrl: resolveWalletUrl(options.options.network, walletUrl), + iconUrl, + })(options); + + if (!webWallet) { + return null; + } + + return { + ...webWallet, + id: "finer-wallet", + metadata: { + ...webWallet.metadata, + name: "FiNER Wallet", + description: "FiNER Wallet Mobile", + iconUrl, + deprecated, + available: true, + }, + }; + } + + const installed = await isInstalledExtension(); + + if (!mobile && installed) { + const extWallet = await setupSender({ + iconUrl, + deprecated, + })(options); + + if (extWallet) { + return { + ...extWallet, + id: "finer-wallet", + metadata: { + ...extWallet.metadata, + name: "FiNER Wallet", + description: "FiNER Wallet Extension", + iconUrl, + deprecated, + available: true, + }, + }; + } + } + + return null; + }; +} diff --git a/packages/finer-wallet/src/lib/icon.ts b/packages/finer-wallet/src/lib/icon.ts new file mode 100644 index 000000000..836a4d5d6 --- /dev/null +++ b/packages/finer-wallet/src/lib/icon.ts @@ -0,0 +1 @@ +export default `data:image/png;base64,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`; diff --git a/packages/finer-wallet/tsconfig.json b/packages/finer-wallet/tsconfig.json new file mode 100644 index 000000000..8b6d6acaf --- /dev/null +++ b/packages/finer-wallet/tsconfig.json @@ -0,0 +1,19 @@ +{ + "extends": "../../tsconfig.base.json", + "compilerOptions": { + "forceConsistentCasingInFileNames": true, + "strict": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true + }, + "files": [], + "include": [], + "references": [ + { + "path": "./tsconfig.lib.json" + }, + { + "path": "./tsconfig.spec.json" + } + ] +} diff --git a/packages/finer-wallet/tsconfig.lib.json b/packages/finer-wallet/tsconfig.lib.json new file mode 100644 index 000000000..e85ef50f6 --- /dev/null +++ b/packages/finer-wallet/tsconfig.lib.json @@ -0,0 +1,10 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../dist/out-tsc", + "declaration": true, + "types": [] + }, + "include": ["**/*.ts"], + "exclude": ["jest.config.ts", "**/*.spec.ts", "**/*.test.ts"] +} diff --git a/packages/finer-wallet/tsconfig.spec.json b/packages/finer-wallet/tsconfig.spec.json new file mode 100644 index 000000000..a176d1bc4 --- /dev/null +++ b/packages/finer-wallet/tsconfig.spec.json @@ -0,0 +1,15 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../dist/out-tsc", + "module": "commonjs", + "types": [ + "jest", + "node" + ] + }, + "include": [ + "jest.config.ts", + "**/*.spec.ts" + ] +} From 851189044113ecee3bc882674789f53b6ca766c6 Mon Sep 17 00:00:00 2001 From: prih Date: Thu, 29 Dec 2022 18:27:05 +0000 Subject: [PATCH 02/45] finer-wallet package --- README.md | 5 +++++ examples/angular/project.json | 5 +++++ examples/angular/src/app/app.component.ts | 2 ++ examples/react/contexts/WalletSelectorContext.tsx | 2 ++ examples/react/project.json | 5 +++++ package.json | 4 +++- scripts/release-packages.bash | 1 + tsconfig.base.json | 3 +++ workspace.json | 3 ++- 9 files changed, 28 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 0b921b442..1d944e484 100644 --- a/README.md +++ b/README.md @@ -17,6 +17,7 @@ NEAR Wallet Selector makes it easy for users to interact with your dApp by provi - [Here Wallet](https://www.npmjs.com/package/@near-wallet-selector/here-wallet) - Mobile wallet. - [NearFi Wallet](https://www.npmjs.com/package/@near-wallet-selector/nearfi) - Mobile wallet. - [Opto Wallet](https://www.npmjs.com/package/@near-wallet-selector/opto-wallet) - Mobile wallet & Browser wallet. +- [Finer Wallet](https://www.npmjs.com/package/@near-wallet-selector/finer-wallet) - Mobile wallet & Browser wallet. ## Preview @@ -64,6 +65,7 @@ yarn add \ @near-wallet-selector/default-wallets \ @near-wallet-selector/coin98-wallet \ @near-wallet-selector/opto-wallet \ + @near-wallet-selector/finer-wallet \ @near-wallet-selector/neth # Using NPM. @@ -83,6 +85,7 @@ npm install \ @near-wallet-selector/default-wallets \ @near-wallet-selector/coin98-wallet \ @near-wallet-selector/opto-wallet \ + @near-wallet-selector/finer-wallet \ @near-wallet-selector/neth ``` @@ -116,6 +119,7 @@ import { setupDefaultWallets } from "@near-wallet-selector/default-wallets"; import { setupNearFi } from "@near-wallet-selector/nearfi"; import { setupCoin98Wallet } from "@near-wallet-selector/coin98-wallet"; import { setupOptoWallet } from "@near-wallet-selector/opto-wallet"; +import { setupFinerWallet } from "@near-wallet-selector/finer-wallet"; import { setupNeth } from "@near-wallet-selector/neth"; const selector = await setupWalletSelector({ @@ -134,6 +138,7 @@ const selector = await setupWalletSelector({ setupNearFi(), setupCoin98Wallet(), setupOptoWallet(), + setupFinerWallet(), setupNeth(), setupWalletConnect({ projectId: "c4f79cc...", diff --git a/examples/angular/project.json b/examples/angular/project.json index efd2da8e9..1f4ca8bfe 100644 --- a/examples/angular/project.json +++ b/examples/angular/project.json @@ -84,6 +84,11 @@ "glob": "**/*", "input": "packages/opto-wallet/assets/", "output": "assets/" + }, + { + "glob": "**/*", + "input": "packages/finer-wallet/assets/", + "output": "assets/" } ], "styles": [ diff --git a/examples/angular/src/app/app.component.ts b/examples/angular/src/app/app.component.ts index 7a7e43326..8488805db 100644 --- a/examples/angular/src/app/app.component.ts +++ b/examples/angular/src/app/app.component.ts @@ -15,6 +15,7 @@ import { setupCoin98Wallet } from "@near-wallet-selector/coin98-wallet"; import { setupHereWallet } from "@near-wallet-selector/here-wallet"; import { setupNeth } from "@near-wallet-selector/neth"; import { setupOptoWallet } from "@near-wallet-selector/opto-wallet"; +import { setupFinerWallet } from "@near-wallet-selector/finer-wallet"; import { setupNearWallet } from "@near-wallet-selector/near-wallet"; // import { setupModal } from "@near-wallet-selector/modal-ui"; // import type { WalletSelectorModal } from "@near-wallet-selector/modal-ui"; @@ -66,6 +67,7 @@ export class AppComponent implements OnInit { bundle: false, }), setupOptoWallet(), + setupFinerWallet(), setupWalletConnect({ projectId: "c4f79cc...", metadata: { diff --git a/examples/react/contexts/WalletSelectorContext.tsx b/examples/react/contexts/WalletSelectorContext.tsx index 4f878def9..07ef290d5 100644 --- a/examples/react/contexts/WalletSelectorContext.tsx +++ b/examples/react/contexts/WalletSelectorContext.tsx @@ -19,6 +19,7 @@ import { setupWalletConnect } from "@near-wallet-selector/wallet-connect"; import { setupCoin98Wallet } from "@near-wallet-selector/coin98-wallet"; import { setupNeth } from "@near-wallet-selector/neth"; import { setupOptoWallet } from "@near-wallet-selector/opto-wallet"; +import { setupFinerWallet } from "@near-wallet-selector/finer-wallet"; import { CONTRACT_ID } from "../constants"; declare global { @@ -65,6 +66,7 @@ export const WalletSelectorContextProvider: React.FC<{ bundle: false, }), setupOptoWallet(), + setupFinerWallet(), setupWalletConnect({ projectId: "c4f79cc...", metadata: { diff --git a/examples/react/project.json b/examples/react/project.json index 36e8a69de..ca9f11f31 100644 --- a/examples/react/project.json +++ b/examples/react/project.json @@ -77,6 +77,11 @@ "glob": "**/*", "input": "packages/opto-wallet/assets/", "output": "assets/" + }, + { + "glob": "**/*", + "input": "packages/finer-wallet/assets/", + "output": "assets/" } ] }, diff --git a/package.json b/package.json index 75ede1802..a08874a48 100644 --- a/package.json +++ b/package.json @@ -21,7 +21,8 @@ "nearfi", "meteor-wallet", "welldone-wallet", - "opto-wallet" + "opto-wallet", + "finer-wallet" ], "homepage": "https://github.com/near/wallet-selector#README", "bugs": { @@ -56,6 +57,7 @@ "build:wallet-connect": "nx run-many --target=build --projects=wallet-connect --configuration=production", "build:nightly-connect": "nx run-many --target=build --projects=nightly-connect --configuration=production", "build:opto-wallet": "nx run-many --target=build --projects=opto-wallet --configuration=production", + "build:finer-wallet": "nx run-many --target=build --projects=finer-wallet --configuration=production", "build:wallet-utils": "nx run-many --target=build --projects=wallet-utils --configuration=production", "build:default-wallets": "nx run-many --target=build --projects=default-wallets --configuration=production", "lint": "nx workspace-lint && nx run-many --target=lint --all --parallel", diff --git a/scripts/release-packages.bash b/scripts/release-packages.bash index 076760854..59a7f7c09 100644 --- a/scripts/release-packages.bash +++ b/scripts/release-packages.bash @@ -21,5 +21,6 @@ npm publish dist/packages/here-wallet --tag "${TAG}" --otp "${OTP}" npm publish dist/packages/coin98-wallet --tag "${TAG}" --otp "${OTP}" npm publish dist/packages/nearfi --tag "${TAG}" --otp "${OTP}" npm publish dist/packages/opto-wallet --tag "${TAG}" --otp "${OTP}" +npm publish dist/packages/finer-wallet --tag "${TAG}" --otp "${OTP}" npm publish dist/packages/welldone-wallet --tag "${TAG}" --otp "${OTP}" npm publish dist/packages/neth --tag "${TAG}" --otp "${OTP}" diff --git a/tsconfig.base.json b/tsconfig.base.json index b94faf238..091762ce0 100644 --- a/tsconfig.base.json +++ b/tsconfig.base.json @@ -80,6 +80,9 @@ "@near-wallet-selector/opto-wallet": [ "packages/opto-wallet/src/index.ts" ], + "@near-wallet-selector/finer-wallet": [ + "packages/finer-wallet/src/index.ts" + ], "crypto": ["node_modules/crypto-browserify"], "stream": ["node_modules/stream-browserify"] } diff --git a/workspace.json b/workspace.json index bd2ca98e8..f3cdc5be5 100644 --- a/workspace.json +++ b/workspace.json @@ -23,6 +23,7 @@ "wallet-connect": "packages/wallet-connect", "wallet-utils": "packages/wallet-utils", "coin98-wallet": "packages/coin98-wallet", - "opto-wallet": "packages/opto-wallet" + "opto-wallet": "packages/opto-wallet", + "finer-wallet": "packages/finer-wallet" } } From eb40512e302f814e1e429f60a43dd606ab4fb810 Mon Sep 17 00:00:00 2001 From: prih Date: Thu, 29 Dec 2022 19:30:37 +0000 Subject: [PATCH 03/45] change wallet urls --- packages/finer-wallet/src/lib/finer-wallet.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/finer-wallet/src/lib/finer-wallet.ts b/packages/finer-wallet/src/lib/finer-wallet.ts index 8f0ef73cc..5aad31200 100644 --- a/packages/finer-wallet/src/lib/finer-wallet.ts +++ b/packages/finer-wallet/src/lib/finer-wallet.ts @@ -32,9 +32,9 @@ const resolveWalletUrl = (network: Network, walletUrl?: string) => { switch (network.networkId) { case "mainnet": - return "https://near-wallet-api.finerwallet.io/mainnet"; + return "https://near-wallet-mainnet.finerwallet.io"; case "testnet": - return "https://near-wallet-api.finerwallet.io/testnet"; + return "https://near-wallet-testnet.finerwallet.io"; default: throw new Error("Invalid wallet url"); } From 393ab68a5fb904ec165180e53ca761ebcf90993d Mon Sep 17 00:00:00 2001 From: prih Date: Fri, 30 Dec 2022 12:28:10 +0000 Subject: [PATCH 04/45] . --- packages/finer-wallet/src/lib/finer-sender.ts | 319 ++++++++++++++++++ packages/finer-wallet/src/lib/finer-wallet.ts | 18 +- .../finer-wallet/src/lib/injected-wallet.ts | 146 ++++++++ 3 files changed, 468 insertions(+), 15 deletions(-) create mode 100644 packages/finer-wallet/src/lib/finer-sender.ts create mode 100644 packages/finer-wallet/src/lib/injected-wallet.ts diff --git a/packages/finer-wallet/src/lib/finer-sender.ts b/packages/finer-wallet/src/lib/finer-sender.ts new file mode 100644 index 000000000..4c8ebaa24 --- /dev/null +++ b/packages/finer-wallet/src/lib/finer-sender.ts @@ -0,0 +1,319 @@ +// based on @near-wallet-selector/sender + +import { isMobile } from "is-mobile"; +import type { + WalletModuleFactory, + WalletBehaviourFactory, + InjectedWallet, + Action, + Transaction, + FunctionCallAction, + Optional, +} from "@near-wallet-selector/core"; +import { waitFor } from "@near-wallet-selector/core"; +import type { InjectedFinerSender } from "./injected-wallet"; +import icon from "./icon"; + +declare global { + interface Window { + finer: { + near: InjectedFinerSender | undefined; + }; + } +} + +export interface SenderParams { + iconUrl?: string; + deprecated?: boolean; +} + +interface SenderState { + wallet: InjectedFinerSender; +} + +const isInstalled = () => { + return waitFor(() => !!window.finer?.near?.isFiner).catch(() => false); +}; + +const setupSenderState = (): SenderState => { + const wallet = window.finer?.near!; + + return { + wallet, + }; +}; + +const Sender: WalletBehaviourFactory = async ({ + options, + metadata, + store, + provider, + emitter, + logger, +}) => { + const _state = setupSenderState(); + + const cleanup = () => { + for (const key in _state.wallet.callbacks) { + _state.wallet.remove(key); + } + }; + + const signOut = async () => { + if (!_state.wallet.isSignedIn()) { + return; + } + + cleanup(); + + const res = await _state.wallet.signOut(); + + if (res === true) { + return; + } + + const error = new Error( + typeof res.error === "string" ? res.error : res.error.type + ); + + // Prevent signing out by throwing. + if (error.message === "User reject") { + throw error; + } + + // Continue signing out but log the issue. + logger.log("Failed to sign out"); + logger.error(error); + }; + + const setupEvents = () => { + _state.wallet.on("accountChanged", async (newAccountId) => { + logger.log("onAccountChange", newAccountId); + emitter.emit("signedOut", null); + }); + + _state.wallet.on("rpcChanged", async (rpc) => { + logger.log("onNetworkChange", rpc); + + if (options.network.networkId !== rpc.networkId) { + await signOut(); + + emitter.emit("signedOut", null); + emitter.emit("networkChanged", { networkId: rpc.networkId }); + } + }); + }; + + const getAccounts = () => { + const accountId = _state.wallet.getAccountId(); + + if (!accountId) { + return []; + } + + return [{ accountId }]; + }; + + const isValidActions = ( + actions: Array + ): actions is Array => { + return actions.every((x) => x.type === "FunctionCall"); + }; + + const transformActions = (actions: Array) => { + const validActions = isValidActions(actions); + + if (!validActions) { + throw new Error( + `Only 'FunctionCall' actions types are supported by ${metadata.name}` + ); + } + + return actions.map((x) => x.params); + }; + + const transformTransactions = ( + transactions: Array> + ) => { + return transactions.map((transaction) => { + return { + receiverId: transaction.receiverId, + actions: transformActions(transaction.actions), + }; + }); + }; + + if (_state.wallet && _state.wallet.isSignedIn()) { + setupEvents(); + } + + return { + async signIn({ contractId, methodNames }) { + const existingAccounts = getAccounts(); + + if (existingAccounts.length) { + return existingAccounts; + } + + const { accessKey, error } = await _state.wallet.requestSignIn({ + contractId, + methodNames, + }); + + if (!accessKey || error) { + await signOut(); + + throw new Error( + (typeof error === "string" ? error : error.type) || + "Failed to sign in" + ); + } + + setupEvents(); + + return getAccounts(); + }, + + signOut, + + async getAccounts() { + return getAccounts(); + }, + + async verifyOwner({ message }) { + logger.log("Sender:verifyOwner", { message }); + + const account = _state.wallet.account(); + + if (!account) { + throw new Error("Wallet not signed in"); + } + + // Note: When the wallet is locked, Sender returns an empty Signer interface. + // Even after unlocking the wallet, the user will need to refresh to gain + // access to these methods. + if (!account.connection.signer.signMessage) { + throw new Error("Wallet is locked"); + } + + const networkId = options.network.networkId; + const accountId = account.accountId; + const pubKey = await account.connection.signer.getPublicKey( + accountId, + networkId + ); + const block = await provider.block({ finality: "final" }); + + const data = { + accountId, + message, + blockId: block.header.hash, + publicKey: Buffer.from(pubKey.data).toString("base64"), + keyType: pubKey.keyType, + }; + const encoded = JSON.stringify(data); + + const signed = await account.connection.signer.signMessage( + new Uint8Array(Buffer.from(encoded)), + accountId, + networkId + ); + + return { + ...data, + signature: Buffer.from(signed.signature).toString("base64"), + keyType: signed.publicKey.keyType, + }; + }, + + async signAndSendTransaction({ signerId, receiverId, actions }) { + logger.log("signAndSendTransaction", { signerId, receiverId, actions }); + + const { contract } = store.getState(); + + if (!_state.wallet.isSignedIn() || !contract) { + throw new Error("Wallet not signed in"); + } + + return _state.wallet + .signAndSendTransaction({ + receiverId: receiverId || contract.contractId, + actions: transformActions(actions), + }) + .then((res) => { + if (res.error) { + throw new Error(res.error); + } else if (res.response && "error" in res.response) { + throw new Error(res.response.error.message); + } + + // Shouldn't happen but avoids inconsistent responses. + if (!res.response?.length) { + throw new Error("Invalid response"); + } + + return res.response[0]; + }); + }, + + async signAndSendTransactions({ transactions }) { + logger.log("signAndSendTransactions", { transactions }); + + if (!_state.wallet.isSignedIn()) { + throw new Error("Wallet not signed in"); + } + + return _state.wallet + .requestSignTransactions({ + transactions: transformTransactions(transactions), + }) + .then((res) => { + if (res.error) { + throw new Error(res.error); + } else if (res.response && "error" in res.response) { + throw new Error(res.response.error.message); + } + + // Shouldn't happen but avoids inconsistent responses. + if (!res.response?.length) { + throw new Error("Invalid response"); + } + + return res.response; + }); + }, + }; +}; + +export function setupFinerSender({ + iconUrl = icon, + deprecated = false, +}: SenderParams = {}): WalletModuleFactory { + return async () => { + const mobile = isMobile(); + const installed = await isInstalled(); + + if (mobile) { + return null; + } + + await waitFor(() => !!window.finer?.near?.isSignedIn(), { + timeout: 300, + }).catch(() => false); + + return { + id: "finer-wallet", + type: "injected", + metadata: { + name: "FiNER Wallet", + description: "Browser extension wallet built on NEAR.", + iconUrl, + downloadUrl: "", + // "https://chrome.google.com/webstore/detail/", + deprecated, + available: installed, + }, + init: Sender, + }; + }; +} diff --git a/packages/finer-wallet/src/lib/finer-wallet.ts b/packages/finer-wallet/src/lib/finer-wallet.ts index 5aad31200..11cf549f9 100644 --- a/packages/finer-wallet/src/lib/finer-wallet.ts +++ b/packages/finer-wallet/src/lib/finer-wallet.ts @@ -8,23 +8,11 @@ import type { } from "@near-wallet-selector/core"; import type { MyNearWalletParams } from "@near-wallet-selector/my-near-wallet"; import { setupMyNearWallet } from "@near-wallet-selector/my-near-wallet"; -import { setupSender } from "@near-wallet-selector/sender"; +import { setupFinerSender } from "./finer-sender"; import icon from "./icon"; export type FinerWalletParams = MyNearWalletParams; -interface InjectedFiner { - near: { - isSender: boolean; - }; -} - -declare global { - interface Window { - finer: InjectedFiner | undefined; - } -} - const resolveWalletUrl = (network: Network, walletUrl?: string) => { if (walletUrl) { return walletUrl; @@ -41,7 +29,7 @@ const resolveWalletUrl = (network: Network, walletUrl?: string) => { }; const isInstalledExtension = () => { - return waitFor(() => !!window.finer?.near?.isSender).catch(() => false); + return waitFor(() => !!window.finer).catch(() => false); }; export function setupFinerWallet({ @@ -81,7 +69,7 @@ export function setupFinerWallet({ const installed = await isInstalledExtension(); if (!mobile && installed) { - const extWallet = await setupSender({ + const extWallet = await setupFinerSender({ iconUrl, deprecated, })(options); diff --git a/packages/finer-wallet/src/lib/injected-wallet.ts b/packages/finer-wallet/src/lib/injected-wallet.ts new file mode 100644 index 000000000..9ba552d04 --- /dev/null +++ b/packages/finer-wallet/src/lib/injected-wallet.ts @@ -0,0 +1,146 @@ +// based on @near-wallet-selector/sender + +import type { Account, providers } from "near-api-js"; + +interface AccessKey { + publicKey: { + data: Uint8Array; + keyType: number; + }; + secretKey: string; +} + +interface RequestSignInResponse { + accessKey: AccessKey; + error: string | { type: string }; + notificationId: number; + type: "sender-wallet-result"; +} + +type SignOutResponse = true | { error: string | { type: string } }; + +interface RpcInfo { + explorerUrl: string; + helperUrl: string; + index: number; + name: string; + network: string; + networkId: string; + nodeUrl: string; + walletUrl: string; + wrapNearContract: string; +} + +interface GetRpcResponse { + method: "getRpc"; + notificationId: number; + rpc: RpcInfo; + type: "sender-wallet-result"; +} + +interface RequestSignInParams { + contractId: string; + methodNames?: Array; + amount?: string; // in yoctoⓃ +} + +interface RpcChangedResponse { + explorerUrl: string; + helperUrl: string; + index: number; + name: string; + network: string; + networkId: string; + nodeUrl: string; + walletUrl: string; + wrapNearContract: string; +} + +interface SendMoneyParams { + receiverId: string; + amount: string; +} + +interface Action { + methodName: string; + args: object; + gas: string; + deposit: string; +} + +interface SignAndSendTransactionParams { + receiverId: string; + actions: Array; +} + +interface FunctionCallError { + error: { + index: number; + kind: object; + message: string; + transaction_outcome: object; + type: "FunctionCallError"; + }; +} + +// Seems to reuse signAndSendTransactions internally, hence the wrong method name and list of responses. +interface SignAndSendTransactionResponse { + actionType: "DAPP/DAPP_POPUP_RESPONSE"; + method: "signAndSendTransactions"; + notificationId: number; + error?: string; + response?: Array | FunctionCallError; + type: "sender-wallet-extensionResult"; +} + +interface SignAndSendTransactionsResponse { + actionType: "DAPP/DAPP_POPUP_RESPONSE"; + method: "signAndSendTransactions"; + notificationId: number; + error?: string; + response?: Array | FunctionCallError; + type: "sender-wallet-extensionResult"; +} + +interface Transaction { + receiverId: string; + actions: Array; +} + +interface RequestSignTransactionsParams { + transactions: Array; +} + +interface SenderEvents { + signIn: () => void; + signOut: () => void; + accountChanged: (changedAccountId: string) => void; + rpcChanged: (response: RpcChangedResponse) => void; +} + +export interface InjectedFinerSender { + isSender: boolean; + isFiner: boolean; + callbacks: Record; + getAccountId: () => string | null; + getRpc: () => Promise; + account(): Account | null; + requestSignIn: ( + params: RequestSignInParams + ) => Promise; + signOut: () => Promise; + isSignedIn: () => boolean; + remove: (event: string) => void; + on: ( + event: Event, + callback: SenderEvents[Event] + ) => void; + // TODO: Determine return type. + sendMoney: (params: SendMoneyParams) => Promise; + signAndSendTransaction: ( + params: SignAndSendTransactionParams + ) => Promise; + requestSignTransactions: ( + params: RequestSignTransactionsParams + ) => Promise; +} From 2dc106251c4c23955a58806a223becb2dba42f88 Mon Sep 17 00:00:00 2001 From: prih Date: Fri, 30 Dec 2022 13:17:48 +0000 Subject: [PATCH 05/45] finer extension fix --- packages/finer-wallet/src/lib/finer-sender.ts | 12 ++++++------ .../finer-wallet/src/lib/injected-wallet.ts | 17 +---------------- 2 files changed, 7 insertions(+), 22 deletions(-) diff --git a/packages/finer-wallet/src/lib/finer-sender.ts b/packages/finer-wallet/src/lib/finer-sender.ts index 4c8ebaa24..ee89d87be 100644 --- a/packages/finer-wallet/src/lib/finer-sender.ts +++ b/packages/finer-wallet/src/lib/finer-sender.ts @@ -53,18 +53,18 @@ const Sender: WalletBehaviourFactory = async ({ }) => { const _state = setupSenderState(); - const cleanup = () => { - for (const key in _state.wallet.callbacks) { - _state.wallet.remove(key); - } - }; + // const cleanup = () => { + // for (const key in _state.wallet.callbacks) { + // _state.wallet.remove(key); + // } + // }; const signOut = async () => { if (!_state.wallet.isSignedIn()) { return; } - cleanup(); + // cleanup(); const res = await _state.wallet.signOut(); diff --git a/packages/finer-wallet/src/lib/injected-wallet.ts b/packages/finer-wallet/src/lib/injected-wallet.ts index 9ba552d04..a59f6d7ae 100644 --- a/packages/finer-wallet/src/lib/injected-wallet.ts +++ b/packages/finer-wallet/src/lib/injected-wallet.ts @@ -3,18 +3,13 @@ import type { Account, providers } from "near-api-js"; interface AccessKey { - publicKey: { - data: Uint8Array; - keyType: number; - }; + publicKey: string; secretKey: string; } interface RequestSignInResponse { accessKey: AccessKey; error: string | { type: string }; - notificationId: number; - type: "sender-wallet-result"; } type SignOutResponse = true | { error: string | { type: string } }; @@ -33,9 +28,7 @@ interface RpcInfo { interface GetRpcResponse { method: "getRpc"; - notificationId: number; rpc: RpcInfo; - type: "sender-wallet-result"; } interface RequestSignInParams { @@ -83,23 +76,16 @@ interface FunctionCallError { }; } -// Seems to reuse signAndSendTransactions internally, hence the wrong method name and list of responses. interface SignAndSendTransactionResponse { - actionType: "DAPP/DAPP_POPUP_RESPONSE"; method: "signAndSendTransactions"; - notificationId: number; error?: string; response?: Array | FunctionCallError; - type: "sender-wallet-extensionResult"; } interface SignAndSendTransactionsResponse { - actionType: "DAPP/DAPP_POPUP_RESPONSE"; method: "signAndSendTransactions"; - notificationId: number; error?: string; response?: Array | FunctionCallError; - type: "sender-wallet-extensionResult"; } interface Transaction { @@ -121,7 +107,6 @@ interface SenderEvents { export interface InjectedFinerSender { isSender: boolean; isFiner: boolean; - callbacks: Record; getAccountId: () => string | null; getRpc: () => Promise; account(): Account | null; From c798f31c789537ec3fcbdf23670792ded9594124 Mon Sep 17 00:00:00 2001 From: prih Date: Fri, 30 Dec 2022 15:31:23 +0000 Subject: [PATCH 06/45] . --- packages/finer-wallet/src/lib/finer-sender.ts | 7 ++++++- packages/finer-wallet/src/lib/injected-wallet.ts | 16 ++++++++++++++++ 2 files changed, 22 insertions(+), 1 deletion(-) diff --git a/packages/finer-wallet/src/lib/finer-sender.ts b/packages/finer-wallet/src/lib/finer-sender.ts index ee89d87be..e3d274baf 100644 --- a/packages/finer-wallet/src/lib/finer-sender.ts +++ b/packages/finer-wallet/src/lib/finer-sender.ts @@ -186,7 +186,12 @@ const Sender: WalletBehaviourFactory = async ({ const account = _state.wallet.account(); if (!account) { - throw new Error("Wallet not signed in"); + const data = await _state.wallet.signMessage(message); + if (data.error) { + throw new Error(data.error); + } + + return data.response; } // Note: When the wallet is locked, Sender returns an empty Signer interface. diff --git a/packages/finer-wallet/src/lib/injected-wallet.ts b/packages/finer-wallet/src/lib/injected-wallet.ts index a59f6d7ae..c4b5fd9ce 100644 --- a/packages/finer-wallet/src/lib/injected-wallet.ts +++ b/packages/finer-wallet/src/lib/injected-wallet.ts @@ -104,6 +104,21 @@ interface SenderEvents { rpcChanged: (response: RpcChangedResponse) => void; } +interface SignMessageData { + accountId: string; + message: string; + blockId: string; + publicKey: string; + keyType: number; + signature: string; +} + +interface SignMessageResponse { + method: "signMessage"; + error?: string; + response?: SignMessageData; +} + export interface InjectedFinerSender { isSender: boolean; isFiner: boolean; @@ -128,4 +143,5 @@ export interface InjectedFinerSender { requestSignTransactions: ( params: RequestSignTransactionsParams ) => Promise; + signMessage: (message: string) => Promise; } From ccaaee4c819b603b9efb52d24086509ecf7859c8 Mon Sep 17 00:00:00 2001 From: prih Date: Tue, 17 Jan 2023 17:14:02 +0000 Subject: [PATCH 07/45] update version 7.5.0 --- packages/finer-wallet/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/finer-wallet/package.json b/packages/finer-wallet/package.json index 942fe8278..f25e53da8 100644 --- a/packages/finer-wallet/package.json +++ b/packages/finer-wallet/package.json @@ -1,4 +1,4 @@ { "name": "@near-wallet-selector/finer-wallet", - "version": "7.4.0" + "version": "7.5.0" } From 05768129ee5576ace48d6e88595a64f99b70dcde Mon Sep 17 00:00:00 2001 From: prih Date: Wed, 18 Jan 2023 14:31:41 +0000 Subject: [PATCH 08/45] fix extension download url --- packages/finer-wallet/src/lib/finer-sender.ts | 4 +- packages/finer-wallet/src/lib/finer-wallet.ts | 40 +++++++------------ 2 files changed, 16 insertions(+), 28 deletions(-) diff --git a/packages/finer-wallet/src/lib/finer-sender.ts b/packages/finer-wallet/src/lib/finer-sender.ts index e3d274baf..18a9c6b1a 100644 --- a/packages/finer-wallet/src/lib/finer-sender.ts +++ b/packages/finer-wallet/src/lib/finer-sender.ts @@ -313,8 +313,8 @@ export function setupFinerSender({ name: "FiNER Wallet", description: "Browser extension wallet built on NEAR.", iconUrl, - downloadUrl: "", - // "https://chrome.google.com/webstore/detail/", + downloadUrl: + "https://chrome.google.com/webstore/detail/finer-wallet/mbboloafhcopdfokibemggdnhcocggpl", deprecated, available: installed, }, diff --git a/packages/finer-wallet/src/lib/finer-wallet.ts b/packages/finer-wallet/src/lib/finer-wallet.ts index 11cf549f9..b77290066 100644 --- a/packages/finer-wallet/src/lib/finer-wallet.ts +++ b/packages/finer-wallet/src/lib/finer-wallet.ts @@ -1,5 +1,4 @@ import { isMobile } from "is-mobile"; -import { waitFor } from "@near-wallet-selector/core"; import type { WalletModuleFactory, BrowserWallet, @@ -28,10 +27,6 @@ const resolveWalletUrl = (network: Network, walletUrl?: string) => { } }; -const isInstalledExtension = () => { - return waitFor(() => !!window.finer).catch(() => false); -}; - export function setupFinerWallet({ walletUrl, iconUrl = icon, @@ -66,28 +61,21 @@ export function setupFinerWallet({ }; } - const installed = await isInstalledExtension(); + const extWallet = await setupFinerSender({ + iconUrl, + deprecated, + })(options); - if (!mobile && installed) { - const extWallet = await setupFinerSender({ - iconUrl, - deprecated, - })(options); - - if (extWallet) { - return { - ...extWallet, - id: "finer-wallet", - metadata: { - ...extWallet.metadata, - name: "FiNER Wallet", - description: "FiNER Wallet Extension", - iconUrl, - deprecated, - available: true, - }, - }; - } + if (extWallet) { + return { + ...extWallet, + id: "finer-wallet", + metadata: { + ...extWallet.metadata, + iconUrl, + deprecated, + }, + }; } return null; From 3f43b6ab4f394d00106b7d33a74685b7cac34cb2 Mon Sep 17 00:00:00 2001 From: prih Date: Thu, 19 Jan 2023 12:29:53 +0000 Subject: [PATCH 09/45] fix --- packages/finer-wallet/package.json | 26 +++++- packages/finer-wallet/src/index.ts | 4 +- .../finer-wallet/src/lib/finer-browser.ts | 55 ++++++++++++ .../{finer-sender.ts => finer-injected.ts} | 26 +++--- packages/finer-wallet/src/lib/finer-wallet.ts | 83 ------------------- packages/finer-wallet/src/lib/finer.ts | 37 +++++++++ .../finer-wallet/src/lib/injected-wallet.ts | 8 +- 7 files changed, 136 insertions(+), 103 deletions(-) create mode 100644 packages/finer-wallet/src/lib/finer-browser.ts rename packages/finer-wallet/src/lib/{finer-sender.ts => finer-injected.ts} (92%) delete mode 100644 packages/finer-wallet/src/lib/finer-wallet.ts create mode 100644 packages/finer-wallet/src/lib/finer.ts diff --git a/packages/finer-wallet/package.json b/packages/finer-wallet/package.json index f25e53da8..1ea5072ef 100644 --- a/packages/finer-wallet/package.json +++ b/packages/finer-wallet/package.json @@ -1,4 +1,28 @@ { "name": "@near-wallet-selector/finer-wallet", - "version": "7.5.0" + "version": "7.5.0", + "description": "FiNER Wallet package for NEAR Wallet Selector.", + "keywords": [ + "near", + "blockchain", + "wallets", + "dapps", + "near-protocol", + "near-blockchain", + "wallet selector", + "injected wallet", + "browser wallet", + "finer wallet" + ], + "repository": { + "type": "git", + "url": "https://github.com/near/wallet-selector.git" + }, + "bugs": { + "url": "https://github.com/near/wallet-selector/issues" + }, + "homepage": "https://github.com/near/wallet-selector/tree/main/packages/finer-wallet", + "peerDependencies": { + "near-api-js": "^0.44.2 || ^1.0.0" + } } diff --git a/packages/finer-wallet/src/index.ts b/packages/finer-wallet/src/index.ts index 59206726c..04fa45fd3 100644 --- a/packages/finer-wallet/src/index.ts +++ b/packages/finer-wallet/src/index.ts @@ -1,2 +1,2 @@ -export { setupFinerWallet } from "./lib/finer-wallet"; -export type { FinerWalletParams } from "./lib/finer-wallet"; +export { setupFinerWallet } from "./lib/finer"; +export type { FinerWalletParams } from "./lib/finer"; diff --git a/packages/finer-wallet/src/lib/finer-browser.ts b/packages/finer-wallet/src/lib/finer-browser.ts new file mode 100644 index 000000000..9f4a52a89 --- /dev/null +++ b/packages/finer-wallet/src/lib/finer-browser.ts @@ -0,0 +1,55 @@ +import type { + WalletModuleFactory, + BrowserWallet, + Network, +} from "@near-wallet-selector/core"; +import type { MyNearWalletParams } from "@near-wallet-selector/my-near-wallet"; +import { setupMyNearWallet } from "@near-wallet-selector/my-near-wallet"; +import icon from "./icon"; + +export type FinerWalletParams = MyNearWalletParams; + +const resolveWalletUrl = (network: Network, walletUrl?: string) => { + if (walletUrl) { + return walletUrl; + } + + switch (network.networkId) { + case "mainnet": + return "https://near-wallet-mainnet.finerwallet.io"; + case "testnet": + return "https://near-wallet-testnet.finerwallet.io"; + default: + throw new Error("Invalid wallet url"); + } +}; + +export function setupFinerBrowser({ + walletUrl, + iconUrl = icon, + deprecated = false, +}: FinerWalletParams = {}): WalletModuleFactory { + return async (options) => { + const webWallet = await setupMyNearWallet({ + walletUrl: resolveWalletUrl(options.options.network, walletUrl), + iconUrl, + })(options); + + if (!webWallet) { + return null; + } + + return { + ...webWallet, + id: "finer-wallet", + metadata: { + ...webWallet.metadata, + name: "FiNER Wallet", + description: "FiNER Wallet Mobile", + iconUrl, + deprecated, + available: true, + }, + }; + }; +} diff --git a/packages/finer-wallet/src/lib/finer-sender.ts b/packages/finer-wallet/src/lib/finer-injected.ts similarity index 92% rename from packages/finer-wallet/src/lib/finer-sender.ts rename to packages/finer-wallet/src/lib/finer-injected.ts index 18a9c6b1a..ccdca8b98 100644 --- a/packages/finer-wallet/src/lib/finer-sender.ts +++ b/packages/finer-wallet/src/lib/finer-injected.ts @@ -11,31 +11,31 @@ import type { Optional, } from "@near-wallet-selector/core"; import { waitFor } from "@near-wallet-selector/core"; -import type { InjectedFinerSender } from "./injected-wallet"; +import type { InjectedFiner } from "./injected-wallet"; import icon from "./icon"; declare global { interface Window { finer: { - near: InjectedFinerSender | undefined; + near: InjectedFiner | undefined; }; } } -export interface SenderParams { +export interface FinerParams { iconUrl?: string; deprecated?: boolean; } -interface SenderState { - wallet: InjectedFinerSender; +interface FinerState { + wallet: InjectedFiner; } const isInstalled = () => { return waitFor(() => !!window.finer?.near?.isFiner).catch(() => false); }; -const setupSenderState = (): SenderState => { +const setupFinerState = (): FinerState => { const wallet = window.finer?.near!; return { @@ -43,7 +43,7 @@ const setupSenderState = (): SenderState => { }; }; -const Sender: WalletBehaviourFactory = async ({ +const FinerExtension: WalletBehaviourFactory = async ({ options, metadata, store, @@ -51,7 +51,7 @@ const Sender: WalletBehaviourFactory = async ({ emitter, logger, }) => { - const _state = setupSenderState(); + const _state = setupFinerState(); // const cleanup = () => { // for (const key in _state.wallet.callbacks) { @@ -181,7 +181,7 @@ const Sender: WalletBehaviourFactory = async ({ }, async verifyOwner({ message }) { - logger.log("Sender:verifyOwner", { message }); + logger.log("Finer:verifyOwner", { message }); const account = _state.wallet.account(); @@ -194,7 +194,7 @@ const Sender: WalletBehaviourFactory = async ({ return data.response; } - // Note: When the wallet is locked, Sender returns an empty Signer interface. + // Note: When the wallet is locked, Wallet returns an empty Signer interface. // Even after unlocking the wallet, the user will need to refresh to gain // access to these methods. if (!account.connection.signer.signMessage) { @@ -290,10 +290,10 @@ const Sender: WalletBehaviourFactory = async ({ }; }; -export function setupFinerSender({ +export function setupFinerInjected({ iconUrl = icon, deprecated = false, -}: SenderParams = {}): WalletModuleFactory { +}: FinerParams = {}): WalletModuleFactory { return async () => { const mobile = isMobile(); const installed = await isInstalled(); @@ -318,7 +318,7 @@ export function setupFinerSender({ deprecated, available: installed, }, - init: Sender, + init: FinerExtension, }; }; } diff --git a/packages/finer-wallet/src/lib/finer-wallet.ts b/packages/finer-wallet/src/lib/finer-wallet.ts deleted file mode 100644 index b77290066..000000000 --- a/packages/finer-wallet/src/lib/finer-wallet.ts +++ /dev/null @@ -1,83 +0,0 @@ -import { isMobile } from "is-mobile"; -import type { - WalletModuleFactory, - BrowserWallet, - Network, - InjectedWallet, -} from "@near-wallet-selector/core"; -import type { MyNearWalletParams } from "@near-wallet-selector/my-near-wallet"; -import { setupMyNearWallet } from "@near-wallet-selector/my-near-wallet"; -import { setupFinerSender } from "./finer-sender"; -import icon from "./icon"; - -export type FinerWalletParams = MyNearWalletParams; - -const resolveWalletUrl = (network: Network, walletUrl?: string) => { - if (walletUrl) { - return walletUrl; - } - - switch (network.networkId) { - case "mainnet": - return "https://near-wallet-mainnet.finerwallet.io"; - case "testnet": - return "https://near-wallet-testnet.finerwallet.io"; - default: - throw new Error("Invalid wallet url"); - } -}; - -export function setupFinerWallet({ - walletUrl, - iconUrl = icon, - deprecated = false, -}: FinerWalletParams = {}): WalletModuleFactory< - BrowserWallet | InjectedWallet -> { - return async (options) => { - const mobile = isMobile(); - - if (mobile) { - const webWallet = await setupMyNearWallet({ - walletUrl: resolveWalletUrl(options.options.network, walletUrl), - iconUrl, - })(options); - - if (!webWallet) { - return null; - } - - return { - ...webWallet, - id: "finer-wallet", - metadata: { - ...webWallet.metadata, - name: "FiNER Wallet", - description: "FiNER Wallet Mobile", - iconUrl, - deprecated, - available: true, - }, - }; - } - - const extWallet = await setupFinerSender({ - iconUrl, - deprecated, - })(options); - - if (extWallet) { - return { - ...extWallet, - id: "finer-wallet", - metadata: { - ...extWallet.metadata, - iconUrl, - deprecated, - }, - }; - } - - return null; - }; -} diff --git a/packages/finer-wallet/src/lib/finer.ts b/packages/finer-wallet/src/lib/finer.ts new file mode 100644 index 000000000..c38624976 --- /dev/null +++ b/packages/finer-wallet/src/lib/finer.ts @@ -0,0 +1,37 @@ +import { isMobile } from "is-mobile"; +import type { + WalletModuleFactory, + BrowserWallet, + InjectedWallet, +} from "@near-wallet-selector/core"; +import type { MyNearWalletParams } from "@near-wallet-selector/my-near-wallet"; +import { setupFinerBrowser } from "./finer-browser"; +import { setupFinerInjected } from "./finer-injected"; +import icon from "./icon"; + +export type FinerWalletParams = MyNearWalletParams; + +export function setupFinerWallet({ + walletUrl, + iconUrl = icon, + deprecated = false, +}: FinerWalletParams = {}): WalletModuleFactory< + BrowserWallet | InjectedWallet +> { + return async (options) => { + const mobile = isMobile(); + + if (mobile) { + return await setupFinerBrowser({ + walletUrl, + iconUrl, + deprecated, + })(options); + } + + return await setupFinerInjected({ + iconUrl, + deprecated, + })(options); + }; +} diff --git a/packages/finer-wallet/src/lib/injected-wallet.ts b/packages/finer-wallet/src/lib/injected-wallet.ts index c4b5fd9ce..21738c0c4 100644 --- a/packages/finer-wallet/src/lib/injected-wallet.ts +++ b/packages/finer-wallet/src/lib/injected-wallet.ts @@ -97,7 +97,7 @@ interface RequestSignTransactionsParams { transactions: Array; } -interface SenderEvents { +interface FinerEvents { signIn: () => void; signOut: () => void; accountChanged: (changedAccountId: string) => void; @@ -119,7 +119,7 @@ interface SignMessageResponse { response?: SignMessageData; } -export interface InjectedFinerSender { +export interface InjectedFiner { isSender: boolean; isFiner: boolean; getAccountId: () => string | null; @@ -131,9 +131,9 @@ export interface InjectedFinerSender { signOut: () => Promise; isSignedIn: () => boolean; remove: (event: string) => void; - on: ( + on: ( event: Event, - callback: SenderEvents[Event] + callback: FinerEvents[Event] ) => void; // TODO: Determine return type. sendMoney: (params: SendMoneyParams) => Promise; From 66f31efc73d8888c2250ea8160594552cf7ce4f1 Mon Sep 17 00:00:00 2001 From: prih Date: Thu, 19 Jan 2023 12:31:53 +0000 Subject: [PATCH 10/45] fix unused code --- packages/finer-wallet/src/lib/finer-injected.ts | 8 -------- 1 file changed, 8 deletions(-) diff --git a/packages/finer-wallet/src/lib/finer-injected.ts b/packages/finer-wallet/src/lib/finer-injected.ts index ccdca8b98..6e3ac5493 100644 --- a/packages/finer-wallet/src/lib/finer-injected.ts +++ b/packages/finer-wallet/src/lib/finer-injected.ts @@ -53,19 +53,11 @@ const FinerExtension: WalletBehaviourFactory = async ({ }) => { const _state = setupFinerState(); - // const cleanup = () => { - // for (const key in _state.wallet.callbacks) { - // _state.wallet.remove(key); - // } - // }; - const signOut = async () => { if (!_state.wallet.isSignedIn()) { return; } - // cleanup(); - const res = await _state.wallet.signOut(); if (res === true) { From fd44fd419d87d305c5cb1c7262fe24a3e6b30d89 Mon Sep 17 00:00:00 2001 From: Pawel-Szydlo Date: Fri, 27 Jan 2023 13:15:40 +0100 Subject: [PATCH 11/45] feat:add initial implementation of importAccountsInSecureContext on NightlyWallet --- packages/nightly/src/lib/injected-nightly.ts | 2 ++ packages/nightly/src/lib/nightly.ts | 4 ++++ 2 files changed, 6 insertions(+) diff --git a/packages/nightly/src/lib/injected-nightly.ts b/packages/nightly/src/lib/injected-nightly.ts index 78701a134..5551abe4a 100644 --- a/packages/nightly/src/lib/injected-nightly.ts +++ b/packages/nightly/src/lib/injected-nightly.ts @@ -1,3 +1,4 @@ +import type { AccountImportData } from "@near-wallet-selector/core"; import type { SignedTransaction as NearSignedTransaction, Transaction as NearTransaction, @@ -21,6 +22,7 @@ export interface NearNightly { eagerConnect?: boolean ) => Promise; disconnect: () => Promise; + importWalletsNear: (privKeys: Array) => Promise; } export interface InjectedNightly { near: NearNightly; diff --git a/packages/nightly/src/lib/nightly.ts b/packages/nightly/src/lib/nightly.ts index 76e9d0cf0..f5d7a6832 100644 --- a/packages/nightly/src/lib/nightly.ts +++ b/packages/nightly/src/lib/nightly.ts @@ -211,6 +211,10 @@ const Nightly: WalletBehaviourFactory = async ({ return results; }, + + async importAccountsInSecureContext(params) { + _state.wallet.importWalletsNear(params.accounts); + }, }; }; From 9c321029162bafd2fb3dafb8f00fe8643e0549da Mon Sep 17 00:00:00 2001 From: Erdit Kurteshi Date: Mon, 30 Jan 2023 13:58:50 +0100 Subject: [PATCH 12/45] fixed override tailwind css --- packages/modal-ui/src/lib/components/styles.css | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/packages/modal-ui/src/lib/components/styles.css b/packages/modal-ui/src/lib/components/styles.css index 0c3681b08..095ec7ff9 100644 --- a/packages/modal-ui/src/lib/components/styles.css +++ b/packages/modal-ui/src/lib/components/styles.css @@ -631,6 +631,10 @@ text-align: center; } +.nws-modal-wrapper .nws-modal .derivation-path-wrapper .enter-derivation-path .ledger-description p { + margin: 14px 0 14px 0; +} + .nws-modal-wrapper .nws-modal .derivation-path-wrapper .enter-derivation-path .ledger-description .specify-path { color: var(--wallet-selector-selected-wallet-bg, var(--selected-wallet-bg)); cursor: pointer; @@ -675,6 +679,10 @@ font-weight: bold; } +.nws-modal-wrapper .nws-modal .specify-path-wrapper p { + margin: 14px 0 14px 0; +} + .nws-modal-wrapper .nws-modal .specify-path-wrapper .path-description { font-size: 14px; margin-top: 24px; @@ -838,6 +846,10 @@ margin: 0 0 0 10px; } +.nws-modal-wrapper .wallet-not-installed-wrapper p { + margin: 16px 0 16px 0; +} + .nws-modal-wrapper .wallet-not-installed-wrapper .wallet-data .wallet-icon-box { width: 40px; height: 40px; @@ -967,6 +979,10 @@ height: auto; } +.connecting-wrapper .content h3 { + margin: 16px 0 16px 0; +} + .connecting-wrapper .content .connecting-name { font-style: normal; font-weight: 700; @@ -1065,6 +1081,7 @@ -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; + margin: 14px 0 14px 0; } .nws-modal-wrapper .nws-modal .nws-modal-body .alert-message .connection .success { From 0cadf1489b5c4dfd2768ff5916a2612953a7f3da Mon Sep 17 00:00:00 2001 From: Erdit Kurteshi Date: Mon, 30 Jan 2023 14:58:16 +0100 Subject: [PATCH 13/45] minor changes --- packages/modal-ui/src/lib/components/styles.css | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/modal-ui/src/lib/components/styles.css b/packages/modal-ui/src/lib/components/styles.css index 095ec7ff9..b62bd544c 100644 --- a/packages/modal-ui/src/lib/components/styles.css +++ b/packages/modal-ui/src/lib/components/styles.css @@ -632,7 +632,7 @@ } .nws-modal-wrapper .nws-modal .derivation-path-wrapper .enter-derivation-path .ledger-description p { - margin: 14px 0 14px 0; + margin: 14px 0; } .nws-modal-wrapper .nws-modal .derivation-path-wrapper .enter-derivation-path .ledger-description .specify-path { @@ -680,7 +680,7 @@ } .nws-modal-wrapper .nws-modal .specify-path-wrapper p { - margin: 14px 0 14px 0; + margin: 14px; } .nws-modal-wrapper .nws-modal .specify-path-wrapper .path-description { @@ -847,7 +847,7 @@ } .nws-modal-wrapper .wallet-not-installed-wrapper p { - margin: 16px 0 16px 0; + margin: 16px 0; } .nws-modal-wrapper .wallet-not-installed-wrapper .wallet-data .wallet-icon-box { @@ -980,7 +980,7 @@ } .connecting-wrapper .content h3 { - margin: 16px 0 16px 0; + margin: 16px 0; } .connecting-wrapper .content .connecting-name { @@ -1081,7 +1081,7 @@ -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; - margin: 14px 0 14px 0; + margin: 14px 0; } .nws-modal-wrapper .nws-modal .nws-modal-body .alert-message .connection .success { From 8f8f6f4d13fa41299864397ff476a37ae44e6940 Mon Sep 17 00:00:00 2001 From: prih Date: Mon, 30 Jan 2023 17:10:03 +0000 Subject: [PATCH 14/45] up 7.6.1 --- packages/finer-wallet/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/finer-wallet/package.json b/packages/finer-wallet/package.json index 1ea5072ef..3ee6a372e 100644 --- a/packages/finer-wallet/package.json +++ b/packages/finer-wallet/package.json @@ -1,6 +1,6 @@ { "name": "@near-wallet-selector/finer-wallet", - "version": "7.5.0", + "version": "7.6.1", "description": "FiNER Wallet package for NEAR Wallet Selector.", "keywords": [ "near", From ff6c41df8b7941c7a7d8fa73e65c78e451541369 Mon Sep 17 00:00:00 2001 From: Erdit Kurteshi Date: Tue, 31 Jan 2023 11:23:13 +0100 Subject: [PATCH 15/45] added css for modal-ui-js --- packages/modal-ui-js/src/lib/styles.css | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/packages/modal-ui-js/src/lib/styles.css b/packages/modal-ui-js/src/lib/styles.css index 06f5756b4..ccc2c63e7 100644 --- a/packages/modal-ui-js/src/lib/styles.css +++ b/packages/modal-ui-js/src/lib/styles.css @@ -631,6 +631,10 @@ text-align: center; } +.nws-modal-wrapper .nws-modal .derivation-path-wrapper .enter-derivation-path .ledger-description p { + margin: 14px 0; +} + .nws-modal-wrapper .nws-modal .derivation-path-wrapper .enter-derivation-path .ledger-description .specify-path { color: var(--wallet-selector-selected-wallet-bg, var(--selected-wallet-bg)); cursor: pointer; @@ -675,6 +679,10 @@ font-weight: bold; } +.nws-modal-wrapper .nws-modal .specify-path-wrapper p { + margin: 14px; +} + .nws-modal-wrapper .nws-modal .specify-path-wrapper .path-description { font-size: 14px; margin-top: 24px; @@ -838,6 +846,10 @@ margin: 0 0 0 10px; } +.nws-modal-wrapper .wallet-not-installed-wrapper p { + margin: 16px 0; +} + .nws-modal-wrapper .wallet-not-installed-wrapper .wallet-data .wallet-icon-box { width: 40px; height: 40px; @@ -967,6 +979,10 @@ height: auto; } +.connecting-wrapper .content h3 { + margin: 16px 0; +} + .connecting-wrapper .content .connecting-name { font-style: normal; font-weight: 700; @@ -1065,13 +1081,13 @@ -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; + margin: 14px 0; } .nws-modal-wrapper .nws-modal .nws-modal-body .alert-message .connection .success { color: #4FD98F; } - .nws-modal-wrapper .nws-modal .connecting-wrapper .content { padding: 25px; } From b586fa93c7c7c638eb13ef97a592f68d8fbba505 Mon Sep 17 00:00:00 2001 From: Kujtim Prenku Date: Tue, 31 Jan 2023 11:31:49 +0100 Subject: [PATCH 16/45] Export event emitter. --- packages/core/src/index.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index a60eeba47..957f5811b 100644 --- a/packages/core/src/index.ts +++ b/packages/core/src/index.ts @@ -13,6 +13,9 @@ export type { JsonStorageService, EventEmitterService, } from "./lib/services"; + +export { EventEmitter } from "./lib/services"; + export type { Optional } from "./lib/utils.types"; export type { From 03e1cc38c103e37eb6fcde25b1eca33fc97dfef7 Mon Sep 17 00:00:00 2001 From: Kujtim Prenku Date: Tue, 31 Jan 2023 15:00:52 +0100 Subject: [PATCH 17/45] Added event emitter service to modal-ui. --- packages/modal-ui/src/lib/modal.tsx | 10 ++++++++++ packages/modal-ui/src/lib/modal.types.ts | 17 +++++++++++++++++ 2 files changed, 27 insertions(+) diff --git a/packages/modal-ui/src/lib/modal.tsx b/packages/modal-ui/src/lib/modal.tsx index 1e61e0146..54a39280e 100644 --- a/packages/modal-ui/src/lib/modal.tsx +++ b/packages/modal-ui/src/lib/modal.tsx @@ -4,6 +4,8 @@ import type { WalletSelector } from "@near-wallet-selector/core"; import type { WalletSelectorModal, ModalOptions } from "./modal.types"; import { Modal } from "./components/Modal"; +import { EventEmitter } from "@near-wallet-selector/core"; +import type { ModalEvents } from "./modal.types"; const MODAL_ELEMENT_ID = "near-wallet-selector-modal"; @@ -21,6 +23,7 @@ export const setupModal = ( const container = document.getElementById(MODAL_ELEMENT_ID); const root = createRoot(container!); + const emitter = new EventEmitter(); const render = (visible = false) => { root.render( @@ -29,6 +32,7 @@ export const setupModal = ( options={options} visible={visible} hide={() => render(false)} + emitter={emitter} /> ); }; @@ -41,6 +45,12 @@ export const setupModal = ( hide: () => { render(false); }, + on: (eventName, callback) => { + return emitter.on(eventName, callback); + }, + off: (eventName, callback) => { + emitter.off(eventName, callback); + }, }; } diff --git a/packages/modal-ui/src/lib/modal.types.ts b/packages/modal-ui/src/lib/modal.types.ts index f48a025f6..6167b7dbb 100644 --- a/packages/modal-ui/src/lib/modal.types.ts +++ b/packages/modal-ui/src/lib/modal.types.ts @@ -1,3 +1,5 @@ +import type { Subscription } from "@near-wallet-selector/core"; + export type Theme = "dark" | "light" | "auto"; export interface ModalOptions { @@ -8,7 +10,22 @@ export interface ModalOptions { onHide?: (hideReason: "user-triggered" | "wallet-navigation") => void; } +export type ModalHideReason = "user-triggered" | "wallet-navigation"; + +export type ModalEvents = { + onHide: { hideReason: ModalHideReason }; +}; + export interface WalletSelectorModal { show(): void; hide(): void; + on( + eventName: EventName, + callback: (event: ModalEvents[EventName]) => void + ): Subscription; + + off( + eventName: EventName, + callback: (event: ModalEvents[EventName]) => void + ): void; } From cd5fbed8cac5e1ed3c0003e4b01a403f2180ae7d Mon Sep 17 00:00:00 2001 From: Kujtim Prenku Date: Tue, 31 Jan 2023 15:02:56 +0100 Subject: [PATCH 18/45] Emitted onHide event via emitter service when modal is closed. --- .../modal-ui/src/lib/components/Modal.tsx | 81 ++++++++++++++----- 1 file changed, 59 insertions(+), 22 deletions(-) diff --git a/packages/modal-ui/src/lib/components/Modal.tsx b/packages/modal-ui/src/lib/components/Modal.tsx index 0d02afbd4..547baa15c 100644 --- a/packages/modal-ui/src/lib/components/Modal.tsx +++ b/packages/modal-ui/src/lib/components/Modal.tsx @@ -1,7 +1,16 @@ import React, { useCallback, useEffect, useState } from "react"; -import type { ModuleState, WalletSelector } from "@near-wallet-selector/core"; - -import type { ModalOptions, Theme } from "../modal.types"; +import type { + EventEmitterService, + ModuleState, + WalletSelector, +} from "@near-wallet-selector/core"; + +import type { + ModalEvents, + ModalHideReason, + ModalOptions, + Theme, +} from "../modal.types"; import type { ModalRoute } from "./Modal.types"; import { WalletNetworkChanged } from "./WalletNetworkChanged"; import { WalletOptions } from "./WalletOptions"; @@ -20,6 +29,7 @@ interface ModalProps { options: ModalOptions; visible: boolean; hide: () => void; + emitter: EventEmitterService; } const getThemeClass = (theme?: Theme) => { @@ -38,6 +48,7 @@ export const Modal: React.FC = ({ options, visible, hide, + emitter, }) => { const [route, setRoute] = useState({ name: "WalletHome", @@ -70,7 +81,7 @@ export const Modal: React.FC = ({ const subscription = selector.on("networkChanged", ({ networkId }) => { // Switched back to the correct network. if (networkId === selector.options.network.networkId) { - return handleDismissClick(); + return handleDismissClick({}); } setRoute({ @@ -83,14 +94,18 @@ export const Modal: React.FC = ({ }, []); const handleDismissClick = useCallback( - (isOnHide?: boolean) => { + ({ hideReason }: { hideReason?: ModalHideReason }) => { setAlertMessage(null); setRoute({ name: "WalletHome", }); - if (isOnHide === true && options.onHide) { - options.onHide("user-triggered"); + if (hideReason === "user-triggered") { + emitter.emit("onHide", { hideReason }); + } + + if (hideReason === "wallet-navigation") { + emitter.emit("onHide", { hideReason }); } hide(); }, @@ -100,7 +115,7 @@ export const Modal: React.FC = ({ useEffect(() => { const close = (e: KeyboardEvent) => { if (e.key === "Escape") { - handleDismissClick(); + handleDismissClick({ hideReason: "user-triggered" }); } }; window.addEventListener("keydown", close); @@ -185,7 +200,7 @@ export const Modal: React.FC = ({ }); subscription.remove(); - handleDismissClick(); + handleDismissClick({}); return; } @@ -197,7 +212,7 @@ export const Modal: React.FC = ({ failureUrl: wallet.metadata.failureUrl, }); - handleDismissClick(); + handleDismissClick({}); return; } @@ -207,7 +222,7 @@ export const Modal: React.FC = ({ methodNames: options.methodNames, }); - handleDismissClick(); + handleDismissClick({}); } catch (err) { const { name } = module.metadata; @@ -234,8 +249,12 @@ export const Modal: React.FC = ({ visible ? "open" : "" }`} > - {/*// @ts-ignore*/} -
+
{ + handleDismissClick({ hideReason: "user-triggered" }); + }} + />
@@ -263,14 +282,18 @@ export const Modal: React.FC = ({ name: "WalletHome", }); }} - onCloseModal={() => handleDismissClick(true)} + onCloseModal={() => + handleDismissClick({ hideReason: "user-triggered" }) + } /> )} {route.name === "DerivationPath" && ( { + handleDismissClick({}); + }} params={route.params} onBack={() => setRoute({ @@ -291,7 +314,9 @@ export const Modal: React.FC = ({ }, }); }} - onCloseModal={() => handleDismissClick(true)} + onCloseModal={() => + handleDismissClick({ hideReason: "user-triggered" }) + } /> )} {route.name === "WalletNetworkChanged" && ( @@ -302,7 +327,9 @@ export const Modal: React.FC = ({ name: "WalletHome", }) } - onCloseModal={() => handleDismissClick(true)} + onCloseModal={() => + handleDismissClick({ hideReason: "user-triggered" }) + } /> )} {route.name === "WalletNotInstalled" && ( @@ -313,7 +340,9 @@ export const Modal: React.FC = ({ name: "WalletHome", }); }} - onCloseModal={() => handleDismissClick(true)} + onCloseModal={() => + handleDismissClick({ hideReason: "user-triggered" }) + } /> )} {route.name === "WalletConnecting" && ( @@ -324,19 +353,25 @@ export const Modal: React.FC = ({ name: "WalletHome", }); }} - onCloseModal={() => handleDismissClick(true)} + onCloseModal={() => + handleDismissClick({ hideReason: "user-triggered" }) + } /> )} {route.name === "WalletHome" && ( handleDismissClick(true)} + onCloseModal={() => + handleDismissClick({ hideReason: "user-triggered" }) + } /> )} {route.name === "WalletConnected" && ( handleDismissClick(true)} + onCloseModal={() => + handleDismissClick({ hideReason: "user-triggered" }) + } /> )} @@ -345,7 +380,9 @@ export const Modal: React.FC = ({ handleOpenDefaultModal={() => { handleWalletClick(selectedWallet!, true); }} - onCloseModal={() => handleDismissClick(true)} + onCloseModal={() => + handleDismissClick({ hideReason: "user-triggered" }) + } uri={bridgeWalletUri} wallet={selectedWallet!} /> From db25164638e7b2c228357ed9c8649f37b061c64d Mon Sep 17 00:00:00 2001 From: Kujtim Prenku Date: Tue, 31 Jan 2023 15:03:36 +0100 Subject: [PATCH 19/45] Listen to onHide method on the react example. --- examples/react/contexts/WalletSelectorContext.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/examples/react/contexts/WalletSelectorContext.tsx b/examples/react/contexts/WalletSelectorContext.tsx index 3aa473c99..85a1551c6 100644 --- a/examples/react/contexts/WalletSelectorContext.tsx +++ b/examples/react/contexts/WalletSelectorContext.tsx @@ -132,7 +132,14 @@ export const WalletSelectorContextProvider: React.FC<{ setAccounts(nextAccounts); }); - return () => subscription.unsubscribe(); + const onHideSubscription = modal!.on("onHide", ({ hideReason }) => { + console.log(`The reason for hiding the modal ${hideReason}`); + }); + + return () => { + subscription.unsubscribe(); + onHideSubscription.remove(); + }; }, [selector]); if (!selector || !modal) { From b33fb4c93062067ad614be3544b5b40eb34aaf60 Mon Sep 17 00:00:00 2001 From: Kujtim Prenku Date: Wed, 1 Feb 2023 08:52:43 +0100 Subject: [PATCH 20/45] Emit onHide with wallet-navigation reason after sign in is successful. --- packages/modal-ui/src/lib/components/Modal.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/modal-ui/src/lib/components/Modal.tsx b/packages/modal-ui/src/lib/components/Modal.tsx index 547baa15c..2537575c8 100644 --- a/packages/modal-ui/src/lib/components/Modal.tsx +++ b/packages/modal-ui/src/lib/components/Modal.tsx @@ -200,7 +200,7 @@ export const Modal: React.FC = ({ }); subscription.remove(); - handleDismissClick({}); + handleDismissClick({ hideReason: "wallet-navigation" }); return; } @@ -212,7 +212,7 @@ export const Modal: React.FC = ({ failureUrl: wallet.metadata.failureUrl, }); - handleDismissClick({}); + handleDismissClick({ hideReason: "wallet-navigation" }); return; } @@ -222,7 +222,7 @@ export const Modal: React.FC = ({ methodNames: options.methodNames, }); - handleDismissClick({}); + handleDismissClick({ hideReason: "wallet-navigation" }); } catch (err) { const { name } = module.metadata; From 328fce6c68c4dd849f4812aa77afff69cfd898d6 Mon Sep 17 00:00:00 2001 From: Kujtim Prenku Date: Wed, 1 Feb 2023 09:12:23 +0100 Subject: [PATCH 21/45] Added event emitter in modal-ui-js and emitted the onHide event. --- .../app/components/content/content.component.ts | 4 ++++ packages/modal-ui-js/src/lib/modal.ts | 15 ++++++++++++++- packages/modal-ui-js/src/lib/modal.types.ts | 16 ++++++++++++++++ packages/modal-ui-js/src/lib/render-modal.ts | 7 +++++-- 4 files changed, 39 insertions(+), 3 deletions(-) diff --git a/examples/angular/src/app/components/content/content.component.ts b/examples/angular/src/app/components/content/content.component.ts index 1f5785a99..f43ed84c4 100644 --- a/examples/angular/src/app/components/content/content.component.ts +++ b/examples/angular/src/app/components/content/content.component.ts @@ -147,6 +147,10 @@ export class ContentComponent implements OnInit, OnDestroy { this.account = account; }); }); + + this.modal.on("onHide", ({ hideReason }) => { + console.log(`The reason for hiding the modal ${hideReason}`); + }); } async addMessages(message: string, donation: string, multiple: boolean) { diff --git a/packages/modal-ui-js/src/lib/modal.ts b/packages/modal-ui-js/src/lib/modal.ts index 6e0064be9..a5b85fed4 100644 --- a/packages/modal-ui-js/src/lib/modal.ts +++ b/packages/modal-ui-js/src/lib/modal.ts @@ -1,4 +1,5 @@ import type { + EventEmitterService, ModuleState, Wallet, WalletSelector, @@ -8,9 +9,11 @@ import type { WalletSelectorModal, ModalOptions, ModalRoute, + ModalEvents, } from "./modal.types"; import { renderWhatIsAWallet } from "./components/WhatIsAWallet"; import { renderWalletAccount } from "./components/WalletAccount"; +import { EventEmitter } from "@near-wallet-selector/core"; const MODAL_ELEMENT_ID = "near-wallet-selector-modal"; export const DEFAULT_DERIVATION_PATH = "44'/397'/0'/0'/1'"; @@ -24,6 +27,7 @@ type ModalState = { route: ModalRoute; modules: Array>; derivationPath: string; + emitter: EventEmitterService; }; export let modalState: ModalState | null = null; @@ -42,6 +46,8 @@ export const setupModal = ( selector: WalletSelector, options: ModalOptions ): WalletSelectorModal => { + const emitter = new EventEmitter(); + modalState = { container: document.getElementById(MODAL_ELEMENT_ID)!, selector, @@ -51,6 +57,7 @@ export const setupModal = ( }, modules: [], derivationPath: DEFAULT_DERIVATION_PATH, + emitter, }; modalState.selector.store.observable.subscribe((state) => { @@ -84,8 +91,8 @@ export const setupModal = ( if (!modalState) { return; } - modalState.container.children[0].classList.remove("open"); + modalState.emitter.emit("onHide", { hideReason: "user-triggered" }); } }; window.addEventListener("keydown", close); @@ -117,6 +124,12 @@ export const setupModal = ( } modalState.container.children[0].classList.remove("open"); }, + on: (eventName, callback) => { + return modalState!.emitter.on(eventName, callback); + }, + off: (eventName, callback) => { + modalState!.emitter.off(eventName, callback); + }, }; } diff --git a/packages/modal-ui-js/src/lib/modal.types.ts b/packages/modal-ui-js/src/lib/modal.types.ts index 0f7f54b6a..617206ccd 100644 --- a/packages/modal-ui-js/src/lib/modal.types.ts +++ b/packages/modal-ui-js/src/lib/modal.types.ts @@ -1,5 +1,6 @@ import type { Wallet } from "@near-wallet-selector/core"; import type { ModuleState } from "@near-wallet-selector/core"; +import type { Subscription } from "@near-wallet-selector/core"; export type Theme = "dark" | "light" | "auto"; @@ -11,9 +12,24 @@ export interface ModalOptions { onHide?: (hideReason: "user-triggered" | "wallet-navigation") => void; } +export type ModalHideReason = "user-triggered" | "wallet-navigation"; + +export type ModalEvents = { + onHide: { hideReason: ModalHideReason }; +}; + export interface WalletSelectorModal { show(): void; hide(): void; + on( + eventName: EventName, + callback: (event: ModalEvents[EventName]) => void + ): Subscription; + + off( + eventName: EventName, + callback: (event: ModalEvents[EventName]) => void + ): void; } type AlertMessageModalRouteParams = { diff --git a/packages/modal-ui-js/src/lib/render-modal.ts b/packages/modal-ui-js/src/lib/render-modal.ts index 6cab4b397..6a526203e 100644 --- a/packages/modal-ui-js/src/lib/render-modal.ts +++ b/packages/modal-ui-js/src/lib/render-modal.ts @@ -132,6 +132,7 @@ export async function connectToWallet( subscription.remove(); modalState.container.children[0].classList.remove("open"); + modalState.emitter.emit("onHide", { hideReason: "wallet-navigation" }); return; } @@ -144,6 +145,7 @@ export async function connectToWallet( }); modalState.container.children[0].classList.remove("open"); + modalState.emitter.emit("onHide", { hideReason: "wallet-navigation" }); return; } @@ -154,6 +156,7 @@ export async function connectToWallet( }); modalState.container.children[0].classList.remove("open"); + modalState.emitter.emit("onHide", { hideReason: "wallet-navigation" }); } catch (err) { const { name } = module.metadata; const message = err instanceof Error ? err.message : "Something went wrong"; @@ -302,7 +305,7 @@ export function renderModal() { modalState.container.children[0].classList.remove("open"); if (modalState.options.onHide) { - modalState.options.onHide("user-triggered"); + modalState.emitter.emit("onHide", { hideReason: "user-triggered" }); } }); @@ -319,7 +322,7 @@ export function renderModal() { modalState.container.children[0].classList.remove("open"); if (modalState.options.onHide) { - modalState.options.onHide("user-triggered"); + modalState.emitter.emit("onHide", { hideReason: "user-triggered" }); } } }); From f5e887546438161ae5ed4c6022606f7c2a63f11a Mon Sep 17 00:00:00 2001 From: Kujtim Prenku Date: Wed, 1 Feb 2023 09:53:12 +0100 Subject: [PATCH 22/45] Emit onHide event for ledger option after sign-in. --- .../src/lib/components/LedgerAccountsOverviewList.ts | 1 + packages/modal-ui/src/lib/components/Modal.tsx | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/modal-ui-js/src/lib/components/LedgerAccountsOverviewList.ts b/packages/modal-ui-js/src/lib/components/LedgerAccountsOverviewList.ts index 94bb96045..daa116035 100644 --- a/packages/modal-ui-js/src/lib/components/LedgerAccountsOverviewList.ts +++ b/packages/modal-ui-js/src/lib/components/LedgerAccountsOverviewList.ts @@ -82,6 +82,7 @@ export async function renderLedgerAccountsOverviewList( }); modalState.container.children[0].classList.remove("open"); + modalState.emitter.emit("onHide", { hideReason: "wallet-navigation" }); } catch (err) { await renderWalletConnectionFailed(module, err as Error); } diff --git a/packages/modal-ui/src/lib/components/Modal.tsx b/packages/modal-ui/src/lib/components/Modal.tsx index 2537575c8..d27b4b48a 100644 --- a/packages/modal-ui/src/lib/components/Modal.tsx +++ b/packages/modal-ui/src/lib/components/Modal.tsx @@ -292,7 +292,7 @@ export const Modal: React.FC = ({ selector={selector} options={options} onConnected={() => { - handleDismissClick({}); + handleDismissClick({ hideReason: "wallet-navigation" }); }} params={route.params} onBack={() => From 0e8791185d0bc815ad45267f469f6bcc89d07ba0 Mon Sep 17 00:00:00 2001 From: Kujtim Prenku Date: Wed, 1 Feb 2023 09:55:24 +0100 Subject: [PATCH 23/45] Fix import of interface for account-export modal. --- examples/react/contexts/WalletSelectorExportContext.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/react/contexts/WalletSelectorExportContext.tsx b/examples/react/contexts/WalletSelectorExportContext.tsx index eb9891c1d..84b41489e 100644 --- a/examples/react/contexts/WalletSelectorExportContext.tsx +++ b/examples/react/contexts/WalletSelectorExportContext.tsx @@ -4,7 +4,7 @@ import { map, distinctUntilChanged } from "rxjs"; import { setupWalletSelector } from "@near-wallet-selector/core"; import type { WalletSelector, AccountState } from "@near-wallet-selector/core"; import { setupExportSelectorModal } from "@near-wallet-selector/account-export"; -import type { WalletSelectorModal } from "@near-wallet-selector/modal-ui"; +import type { WalletSelectorModal } from "@near-wallet-selector/account-export"; import { setupDefaultWallets } from "@near-wallet-selector/default-wallets"; import { setupNearWallet } from "@near-wallet-selector/near-wallet"; import { setupHereWallet } from "@near-wallet-selector/here-wallet"; From 2360765508885c6213c16fb7145368c7f427aef4 Mon Sep 17 00:00:00 2001 From: Kujtim Prenku Date: Wed, 1 Feb 2023 10:40:12 +0100 Subject: [PATCH 24/45] Update docs in modal-ui and modal-ui-js for event listeners. --- packages/modal-ui-js/docs/api/modal.md | 62 ++++++++++++++++++++++++++ packages/modal-ui/docs/api/modal.md | 61 +++++++++++++++++++++++++ 2 files changed, 123 insertions(+) diff --git a/packages/modal-ui-js/docs/api/modal.md b/packages/modal-ui-js/docs/api/modal.md index cc899301b..38ea90359 100644 --- a/packages/modal-ui-js/docs/api/modal.md +++ b/packages/modal-ui-js/docs/api/modal.md @@ -39,3 +39,65 @@ Closes the modal. ```ts modal.hide(); ``` + + +### `.on(event, callback)` + +**Parameters** + +- `event` (`string`): Name of the event. This can be: `onHide`. +- `callback` (`Function`): Handler to be triggered when the `event` fires. + +**Returns** + +- `Subscription` + +**Description** + +Attach an event handler to important events. + +**Example** + +```ts +const subscription = modal.on("onHide", ({ hideReason }) => { + console.log(`The reason for hiding the modal ${hideReason}`); +}); + +// Unsubscribe. +subscription.remove(); +``` + +### `.off(event, callback)` + +**Parameters** + +- `event` (`string`): Name of the event. This can be: `onHide`. +- `callback` (`Function`): Original handler passed to `.on(event, callback)`. + +**Returns** + +- `void` + +**Description** + +Removes the event handler attached to the given `event`. + +**Example** + +The `onHide` event can be triggered in different scenarios: +- When user clicks the X button on the UI the event is emitted with the `user-triggered` reason. +- When user presses the ESC key the event is emitted with the `user-triggered` reason. +- When user clicks the overlay outside the modal the event is emitted with the `user-triggered` reason. +- The modal is closed after a successful sign-in in this case the event is emitted with the `wallet-navigation` reason. + +```ts +const handleModalClosed = ({ + hideReason +}: ModalEvents["onHide"]) => { + // hideReason is a string `user-triggered` or `wallet-navigation` + console.log(`The reason for hiding the modal ${hideReason}`); +} + +selector.on("onHide", handleModalClosed); +selector.off("onHide", handleModalClosed); +``` diff --git a/packages/modal-ui/docs/api/modal.md b/packages/modal-ui/docs/api/modal.md index cc899301b..ce4be219b 100644 --- a/packages/modal-ui/docs/api/modal.md +++ b/packages/modal-ui/docs/api/modal.md @@ -39,3 +39,64 @@ Closes the modal. ```ts modal.hide(); ``` + +### `.on(event, callback)` + +**Parameters** + +- `event` (`string`): Name of the event. This can be: `onHide`. +- `callback` (`Function`): Handler to be triggered when the `event` fires. + +**Returns** + +- `Subscription` + +**Description** + +Attach an event handler to important events. + +**Example** + +```ts +const subscription = modal.on("onHide", ({ hideReason }) => { + console.log(`The reason for hiding the modal ${hideReason}`); +}); + +// Unsubscribe. +subscription.remove(); +``` + +### `.off(event, callback)` + +**Parameters** + +- `event` (`string`): Name of the event. This can be: `onHide`. +- `callback` (`Function`): Original handler passed to `.on(event, callback)`. + +**Returns** + +- `void` + +**Description** + +Removes the event handler attached to the given `event`. + +**Example** + +The `onHide` event can be triggered in different scenarios: +- When user clicks the X button on the UI the event is emitted with the `user-triggered` reason. +- When user presses the ESC key the event is emitted with the `user-triggered` reason. +- When user clicks the overlay outside the modal the event is emitted with the `user-triggered` reason. +- The modal is closed after a successful sign-in in this case the event is emitted with the `wallet-navigation` reason. + +```ts +const handleModalClosed = ({ + hideReason +}: ModalEvents["onHide"]) => { + // hideReason is a string `user-triggered` or `wallet-navigation` + console.log(`The reason for hiding the modal ${hideReason}`); +} + +selector.on("onHide", handleModalClosed); +selector.off("onHide", handleModalClosed); +``` From fef6c977e68fb81738dc64665c239e6f97b9f340 Mon Sep 17 00:00:00 2001 From: Kujtim Prenku Date: Wed, 1 Feb 2023 10:41:02 +0100 Subject: [PATCH 25/45] Export ModalEvents interface. --- packages/modal-ui-js/src/index.ts | 1 + packages/modal-ui/src/index.ts | 1 + 2 files changed, 2 insertions(+) diff --git a/packages/modal-ui-js/src/index.ts b/packages/modal-ui-js/src/index.ts index a5957b4ea..eeb0f4766 100644 --- a/packages/modal-ui-js/src/index.ts +++ b/packages/modal-ui-js/src/index.ts @@ -4,4 +4,5 @@ export type { WalletSelectorModal, ModalOptions, Theme, + ModalEvents, } from "./lib/modal.types"; diff --git a/packages/modal-ui/src/index.ts b/packages/modal-ui/src/index.ts index a5957b4ea..eeb0f4766 100644 --- a/packages/modal-ui/src/index.ts +++ b/packages/modal-ui/src/index.ts @@ -4,4 +4,5 @@ export type { WalletSelectorModal, ModalOptions, Theme, + ModalEvents, } from "./lib/modal.types"; From c7835ec201739ca22a18b9f38cb4d3b35c5623a3 Mon Sep 17 00:00:00 2001 From: Kujtim Prenku Date: Wed, 1 Feb 2023 10:48:28 +0100 Subject: [PATCH 26/45] Remove references of old onHide callback through the ModalOptions. --- examples/angular/src/app/app.component.ts | 3 --- examples/react/contexts/WalletSelectorContext.tsx | 3 --- packages/modal-ui-js/README.md | 1 - packages/modal-ui/README.md | 1 - 4 files changed, 8 deletions(-) diff --git a/examples/angular/src/app/app.component.ts b/examples/angular/src/app/app.component.ts index 96b99371f..64b935139 100644 --- a/examples/angular/src/app/app.component.ts +++ b/examples/angular/src/app/app.component.ts @@ -95,9 +95,6 @@ export class AppComponent implements OnInit { const _modal = setupModal(_selector, { contractId: CONTRACT_ID, - onHide: (hideReason) => { - console.log("The reason for hiding modal: ", hideReason); - }, }); const state = _selector.store.getState(); diff --git a/examples/react/contexts/WalletSelectorContext.tsx b/examples/react/contexts/WalletSelectorContext.tsx index 85a1551c6..81cd8180d 100644 --- a/examples/react/contexts/WalletSelectorContext.tsx +++ b/examples/react/contexts/WalletSelectorContext.tsx @@ -95,9 +95,6 @@ export const WalletSelectorContextProvider: React.FC<{ }); const _modal = setupModal(_selector, { contractId: CONTRACT_ID, - onHide: (hideReason) => { - console.log("the reason for hidding modal...", hideReason); - }, }); const state = _selector.store.getState(); setAccounts(state.accounts); diff --git a/packages/modal-ui-js/README.md b/packages/modal-ui-js/README.md index 085b8c523..6db179e8c 100644 --- a/packages/modal-ui-js/README.md +++ b/packages/modal-ui-js/README.md @@ -39,7 +39,6 @@ modal.show(); - `methodNames` (`Array?`): Specify limited access to particular methods on the Smart Contract. - `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. -- `onHide` (`(hideReason) => {}?`): Callback method triggered when close button is clicked in the UI. ## Styles & Customizing CSS diff --git a/packages/modal-ui/README.md b/packages/modal-ui/README.md index c1f5b33b6..a4dd4e08d 100644 --- a/packages/modal-ui/README.md +++ b/packages/modal-ui/README.md @@ -39,7 +39,6 @@ modal.show(); - `methodNames` (`Array?`): Specify limited access to particular methods on the Smart Contract. - `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. -- `onHide` (`(hideReason) => {}?`): Callback method triggered when close button is clicked in the UI. ## Styles & Customizing CSS From 7ba18fd0651ba9dfbbbe71e4001ff09f327e5643 Mon Sep 17 00:00:00 2001 From: Kujtim Prenku Date: Wed, 1 Feb 2023 10:52:42 +0100 Subject: [PATCH 27/45] Minor fix rename instance in docs. --- packages/modal-ui-js/docs/api/modal.md | 4 ++-- packages/modal-ui/docs/api/modal.md | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/modal-ui-js/docs/api/modal.md b/packages/modal-ui-js/docs/api/modal.md index 38ea90359..16e66bbe4 100644 --- a/packages/modal-ui-js/docs/api/modal.md +++ b/packages/modal-ui-js/docs/api/modal.md @@ -98,6 +98,6 @@ const handleModalClosed = ({ console.log(`The reason for hiding the modal ${hideReason}`); } -selector.on("onHide", handleModalClosed); -selector.off("onHide", handleModalClosed); +modal.on("onHide", handleModalClosed); +modal.off("onHide", handleModalClosed); ``` diff --git a/packages/modal-ui/docs/api/modal.md b/packages/modal-ui/docs/api/modal.md index ce4be219b..9a81b627a 100644 --- a/packages/modal-ui/docs/api/modal.md +++ b/packages/modal-ui/docs/api/modal.md @@ -97,6 +97,6 @@ const handleModalClosed = ({ console.log(`The reason for hiding the modal ${hideReason}`); } -selector.on("onHide", handleModalClosed); -selector.off("onHide", handleModalClosed); +modal.on("onHide", handleModalClosed); +modal.off("onHide", handleModalClosed); ``` From 9e7eb6a0909b53dcadce95886d5056df6266c101 Mon Sep 17 00:00:00 2001 From: Kujtim Prenku Date: Wed, 1 Feb 2023 13:52:20 +0100 Subject: [PATCH 28/45] Added separate components for wallet-selector modal and account-export modal. --- .../wallet-selector-export.component.html | 11 ++ .../wallet-selector-export.component.scss | 0 .../wallet-selector-export.component.ts | 119 ++++++++++++++++++ .../wallet-selector.component.html | 9 ++ .../wallet-selector.component.scss | 0 .../wallet-selector.component.ts | 112 +++++++++++++++++ 6 files changed, 251 insertions(+) create mode 100644 examples/angular/src/app/pages/wallet-selector-export/wallet-selector-export.component.html create mode 100644 examples/angular/src/app/pages/wallet-selector-export/wallet-selector-export.component.scss create mode 100644 examples/angular/src/app/pages/wallet-selector-export/wallet-selector-export.component.ts create mode 100644 examples/angular/src/app/pages/wallet-selector/wallet-selector.component.html create mode 100644 examples/angular/src/app/pages/wallet-selector/wallet-selector.component.scss create mode 100644 examples/angular/src/app/pages/wallet-selector/wallet-selector.component.ts diff --git a/examples/angular/src/app/pages/wallet-selector-export/wallet-selector-export.component.html b/examples/angular/src/app/pages/wallet-selector-export/wallet-selector-export.component.html new file mode 100644 index 000000000..a6ad6d035 --- /dev/null +++ b/examples/angular/src/app/pages/wallet-selector-export/wallet-selector-export.component.html @@ -0,0 +1,11 @@ + +
+ +

+ The Export Accounts modal assists users in migrating their accounts to + any Wallet Selector wallet supporting account imports. Any sensitive + data in transit during this process will be encrypted with a + randomly-generated password which the user will be required to copy down + and use in the account import process on the target wallet. +

+
diff --git a/examples/angular/src/app/pages/wallet-selector-export/wallet-selector-export.component.scss b/examples/angular/src/app/pages/wallet-selector-export/wallet-selector-export.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/examples/angular/src/app/pages/wallet-selector-export/wallet-selector-export.component.ts b/examples/angular/src/app/pages/wallet-selector-export/wallet-selector-export.component.ts new file mode 100644 index 000000000..25c433db8 --- /dev/null +++ b/examples/angular/src/app/pages/wallet-selector-export/wallet-selector-export.component.ts @@ -0,0 +1,119 @@ +import type { OnInit } from "@angular/core"; +import type { AccountState, WalletSelector } from "@near-wallet-selector/core"; +import { setupWalletSelector } from "@near-wallet-selector/core"; +import type { WalletSelectorModal } from "@near-wallet-selector/account-export"; +import { setupDefaultWallets } from "@near-wallet-selector/default-wallets"; +import { setupNearWallet } from "@near-wallet-selector/near-wallet"; +import { setupSender } from "@near-wallet-selector/sender"; +import { setupXDEFI } from "@near-wallet-selector/xdefi"; +import { setupMathWallet } from "@near-wallet-selector/math-wallet"; +import { setupNightly } from "@near-wallet-selector/nightly"; +import { setupMeteorWallet } from "@near-wallet-selector/meteor-wallet"; +import { setupNarwallets } from "@near-wallet-selector/narwallets"; +import { setupWelldoneWallet } from "@near-wallet-selector/welldone-wallet"; +import { setupHereWallet } from "@near-wallet-selector/here-wallet"; +import { setupCoin98Wallet } from "@near-wallet-selector/coin98-wallet"; +import { setupNearFi } from "@near-wallet-selector/nearfi"; +import { setupNeth } from "@near-wallet-selector/neth"; +import { setupOptoWallet } from "@near-wallet-selector/opto-wallet"; +import { setupFinerWallet } from "@near-wallet-selector/finer-wallet"; +import { setupWalletConnect } from "@near-wallet-selector/wallet-connect"; +import { setupNightlyConnect } from "@near-wallet-selector/nightly-connect"; +import { Component } from "@angular/core"; +import { setupExportSelectorModal } from "@near-wallet-selector/account-export"; + +declare global { + interface Window { + exportSelector: WalletSelector; + exportModal: WalletSelectorModal; + } +} + +@Component({ + selector: "near-wallet-selector-wallet-selector-export", + templateUrl: "./wallet-selector-export.component.html", + styleUrls: ["./wallet-selector-export.component.scss"], +}) +export class WalletSelectorExportComponent implements OnInit { + exportSelector: WalletSelector; + exportModal: WalletSelectorModal; + accountId: string | null; + accounts: Array = []; + + async ngOnInit() { + await this.initialize().catch((err) => { + console.error(err); + alert("Failed to initialise wallet selector"); + }); + } + + async initialize() { + const _selector = await setupWalletSelector({ + network: "testnet", + debug: true, + allowMultipleSelectors: true, + modules: [ + ...(await setupDefaultWallets()), + setupNearWallet(), + setupSender(), + setupXDEFI(), + setupMathWallet(), + setupNightly(), + setupMeteorWallet(), + setupNarwallets(), + setupWelldoneWallet(), + setupHereWallet(), + setupCoin98Wallet(), + setupNearFi(), + setupNeth({ + bundle: false, + }), + setupOptoWallet(), + setupFinerWallet(), + setupWalletConnect({ + projectId: "c4f79cc...", + metadata: { + name: "NEAR Wallet Selector", + description: "Example dApp used by NEAR Wallet Selector", + url: "https://github.com/near/wallet-selector", + icons: ["https://avatars.githubusercontent.com/u/37784886"], + }, + }), + setupNightlyConnect({ + url: "wss://relay.nightly.app/app", + appMetadata: { + additionalInfo: "", + application: "NEAR Wallet Selector", + description: "Example dApp used by NEAR Wallet Selector", + icon: "https://near.org/wp-content/uploads/2020/09/cropped-favicon-192x192.png", + }, + }), + ], + }); + /** + * Insert list of accounts to be imported here + * accounts: [{ accountId: "test.testnet", privateKey: "ed25519:..."}, ...] + */ + const _modal = setupExportSelectorModal(_selector, { + accounts: [], + onComplete: (completedAccounts) => { + console.log("Transfer Completed: ", completedAccounts); + }, + }); + const state = _selector.store.getState(); + + this.accounts = state.accounts; + this.accountId = + state.accounts.find((account) => account.active)?.accountId || null; + + window.exportSelector = _selector; + window.exportModal = _modal; + + this.exportSelector = _selector; + this.exportModal = _modal; + } + + show() { + this.exportModal.show(); + } +} diff --git a/examples/angular/src/app/pages/wallet-selector/wallet-selector.component.html b/examples/angular/src/app/pages/wallet-selector/wallet-selector.component.html new file mode 100644 index 000000000..85aaf9390 --- /dev/null +++ b/examples/angular/src/app/pages/wallet-selector/wallet-selector.component.html @@ -0,0 +1,9 @@ + + + diff --git a/examples/angular/src/app/pages/wallet-selector/wallet-selector.component.scss b/examples/angular/src/app/pages/wallet-selector/wallet-selector.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/examples/angular/src/app/pages/wallet-selector/wallet-selector.component.ts b/examples/angular/src/app/pages/wallet-selector/wallet-selector.component.ts new file mode 100644 index 000000000..f7e96309c --- /dev/null +++ b/examples/angular/src/app/pages/wallet-selector/wallet-selector.component.ts @@ -0,0 +1,112 @@ +import type { OnInit } from "@angular/core"; +import type { AccountState, WalletSelector } from "@near-wallet-selector/core"; +import { setupWalletSelector } from "@near-wallet-selector/core"; +import type { WalletSelectorModal } from "@near-wallet-selector/modal-ui-js"; +import { setupModal } from "@near-wallet-selector/modal-ui-js"; +import { setupDefaultWallets } from "@near-wallet-selector/default-wallets"; +import { setupNearWallet } from "@near-wallet-selector/near-wallet"; +import { setupSender } from "@near-wallet-selector/sender"; +import { setupXDEFI } from "@near-wallet-selector/xdefi"; +import { setupMathWallet } from "@near-wallet-selector/math-wallet"; +import { setupNightly } from "@near-wallet-selector/nightly"; +import { setupMeteorWallet } from "@near-wallet-selector/meteor-wallet"; +import { setupNarwallets } from "@near-wallet-selector/narwallets"; +import { setupWelldoneWallet } from "@near-wallet-selector/welldone-wallet"; +import { setupHereWallet } from "@near-wallet-selector/here-wallet"; +import { setupCoin98Wallet } from "@near-wallet-selector/coin98-wallet"; +import { setupNearFi } from "@near-wallet-selector/nearfi"; +import { setupNeth } from "@near-wallet-selector/neth"; +import { setupOptoWallet } from "@near-wallet-selector/opto-wallet"; +import { setupFinerWallet } from "@near-wallet-selector/finer-wallet"; +import { setupWalletConnect } from "@near-wallet-selector/wallet-connect"; +import { setupNightlyConnect } from "@near-wallet-selector/nightly-connect"; +import { CONTRACT_ID } from "../../../constants"; +import { Component } from "@angular/core"; + +declare global { + interface Window { + selector: WalletSelector; + modal: WalletSelectorModal; + } +} + +@Component({ + selector: "near-wallet-selector-wallet-selector", + templateUrl: "./wallet-selector.component.html", + styleUrls: ["./wallet-selector.component.scss"], +}) +export class WalletSelectorComponent implements OnInit { + selector: WalletSelector; + modal: WalletSelectorModal; + accountId: string | null; + accounts: Array = []; + + async ngOnInit() { + await this.initialize().catch((err) => { + console.error(err); + alert("Failed to initialise wallet selector"); + }); + } + + async initialize() { + const _selector = await setupWalletSelector({ + network: "testnet", + debug: true, + modules: [ + ...(await setupDefaultWallets()), + setupNearWallet(), + setupSender(), + setupXDEFI(), + setupMathWallet(), + setupNightly(), + setupMeteorWallet(), + setupNarwallets(), + setupWelldoneWallet(), + setupHereWallet(), + setupCoin98Wallet(), + setupNearFi(), + setupNeth({ + bundle: false, + }), + setupOptoWallet(), + setupFinerWallet(), + setupWalletConnect({ + projectId: "c4f79cc...", + metadata: { + name: "NEAR Wallet Selector", + description: "Example dApp used by NEAR Wallet Selector", + url: "https://github.com/near/wallet-selector", + icons: ["https://avatars.githubusercontent.com/u/37784886"], + }, + }), + setupNightlyConnect({ + url: "wss://relay.nightly.app/app", + appMetadata: { + additionalInfo: "", + application: "NEAR Wallet Selector", + description: "Example dApp used by NEAR Wallet Selector", + icon: "https://near.org/wp-content/uploads/2020/09/cropped-favicon-192x192.png", + }, + }), + ], + }); + + const _modal = setupModal(_selector, { + contractId: CONTRACT_ID, + onHide: (hideReason) => { + console.log("The reason for hiding modal: ", hideReason); + }, + }); + const state = _selector.store.getState(); + + this.accounts = state.accounts; + this.accountId = + state.accounts.find((account) => account.active)?.accountId || null; + + window.selector = _selector; + window.modal = _modal; + + this.selector = _selector; + this.modal = _modal; + } +} From 41b1fb3bd01f36d7816cc38a47b4f4e60077dbb4 Mon Sep 17 00:00:00 2001 From: Kujtim Prenku Date: Wed, 1 Feb 2023 13:53:04 +0100 Subject: [PATCH 29/45] Added loading component. --- .../src/app/components/loading/loading.component.html | 6 ++++++ .../src/app/components/loading/loading.component.scss | 0 .../src/app/components/loading/loading.component.ts | 8 ++++++++ 3 files changed, 14 insertions(+) create mode 100644 examples/angular/src/app/components/loading/loading.component.html create mode 100644 examples/angular/src/app/components/loading/loading.component.scss create mode 100644 examples/angular/src/app/components/loading/loading.component.ts diff --git a/examples/angular/src/app/components/loading/loading.component.html b/examples/angular/src/app/components/loading/loading.component.html new file mode 100644 index 000000000..5d27fb093 --- /dev/null +++ b/examples/angular/src/app/components/loading/loading.component.html @@ -0,0 +1,6 @@ +
+
+
+
+
+
diff --git a/examples/angular/src/app/components/loading/loading.component.scss b/examples/angular/src/app/components/loading/loading.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/examples/angular/src/app/components/loading/loading.component.ts b/examples/angular/src/app/components/loading/loading.component.ts new file mode 100644 index 000000000..73e220190 --- /dev/null +++ b/examples/angular/src/app/components/loading/loading.component.ts @@ -0,0 +1,8 @@ +import { Component } from "@angular/core"; + +@Component({ + selector: "near-wallet-selector-loading", + templateUrl: "./loading.component.html", + styleUrls: ["./loading.component.scss"], +}) +export class LoadingComponent {} From d666b56e79e4e49859a25b18a17f7cc3182b9be4 Mon Sep 17 00:00:00 2001 From: Kujtim Prenku Date: Wed, 1 Feb 2023 13:56:44 +0100 Subject: [PATCH 30/45] Added css for the loading component. --- .../components/loading/loading.component.scss | 56 +++++++++++++++++++ 1 file changed, 56 insertions(+) diff --git a/examples/angular/src/app/components/loading/loading.component.scss b/examples/angular/src/app/components/loading/loading.component.scss index e69de29bb..221b6e399 100644 --- a/examples/angular/src/app/components/loading/loading.component.scss +++ b/examples/angular/src/app/components/loading/loading.component.scss @@ -0,0 +1,56 @@ +.lds-ellipsis { + position: relative; + width: 80px; + height: 80px; + margin: auto; +} +.lds-ellipsis div { + position: absolute; + top: 33px; + width: 13px; + height: 13px; + border-radius: 50%; + background: var(--fg); + animation-timing-function: cubic-bezier(0, 1, 1, 0); + +} +.lds-ellipsis div:nth-child(1) { + left: 8px; + animation: lds-ellipsis1 0.6s infinite; +} +.lds-ellipsis div:nth-child(2) { + left: 8px; + animation: lds-ellipsis2 0.6s infinite; +} +.lds-ellipsis div:nth-child(3) { + left: 32px; + animation: lds-ellipsis2 0.6s infinite; +} +.lds-ellipsis div:nth-child(4) { + left: 56px; + animation: lds-ellipsis3 0.6s infinite; +} +@keyframes lds-ellipsis1 { + 0% { + transform: scale(0); + } + 100% { + transform: scale(1); + } +} +@keyframes lds-ellipsis3 { + 0% { + transform: scale(1); + } + 100% { + transform: scale(0); + } +} +@keyframes lds-ellipsis2 { + 0% { + transform: translate(0, 0); + } + 100% { + transform: translate(24px, 0); + } +} From 7e3971fed99cf6a7c58f45902569402e52abb0c3 Mon Sep 17 00:00:00 2001 From: Kujtim Prenku Date: Wed, 1 Feb 2023 13:57:44 +0100 Subject: [PATCH 31/45] Registered components in the main app module. --- examples/angular/src/app/app.module.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/examples/angular/src/app/app.module.ts b/examples/angular/src/app/app.module.ts index bab3b8e94..0c09b697e 100644 --- a/examples/angular/src/app/app.module.ts +++ b/examples/angular/src/app/app.module.ts @@ -7,6 +7,9 @@ import { SignInComponent } from "./components/sign-in/sign-in.component"; import { MessagesComponent } from "./components/messages/messages.component"; import { FormComponent } from "./components/form/form.component"; import { ContentComponent } from "./components/content/content.component"; +import { WalletSelectorComponent } from "./pages/wallet-selector/wallet-selector.component"; +import { WalletSelectorExportComponent } from "./pages/wallet-selector-export/wallet-selector-export.component"; +import { LoadingComponent } from "./components/loading/loading.component"; @NgModule({ declarations: [ @@ -15,6 +18,9 @@ import { ContentComponent } from "./components/content/content.component"; MessagesComponent, FormComponent, ContentComponent, + WalletSelectorComponent, + WalletSelectorExportComponent, + LoadingComponent, ], imports: [BrowserModule, FormsModule], providers: [], From 6e69e4bf51c5609a4a08b9fe441af6193c7d8735 Mon Sep 17 00:00:00 2001 From: Kujtim Prenku Date: Wed, 1 Feb 2023 13:58:41 +0100 Subject: [PATCH 32/45] Fix compilation errors for account-export modal. --- examples/angular/tsconfig.json | 1 + 1 file changed, 1 insertion(+) diff --git a/examples/angular/tsconfig.json b/examples/angular/tsconfig.json index 7b7414a9c..6d460329c 100644 --- a/examples/angular/tsconfig.json +++ b/examples/angular/tsconfig.json @@ -23,6 +23,7 @@ "noFallthroughCasesInSwitch": true, "resolveJsonModule": true, "esModuleInterop": true, + "jsx": "react-jsx" }, "angularCompilerOptions": { "strictInjectionParameters": true, From 946d837bf56b7b92a4cd724a119f48d91782b307 Mon Sep 17 00:00:00 2001 From: Kujtim Prenku Date: Wed, 1 Feb 2023 13:59:57 +0100 Subject: [PATCH 33/45] Conditionally show modal-ui-js and account-export modal. --- examples/angular/src/app/app.component.html | 17 ++- examples/angular/src/app/app.component.ts | 108 +------------------- examples/angular/src/styles.scss | 81 ++++++--------- 3 files changed, 42 insertions(+), 164 deletions(-) diff --git a/examples/angular/src/app/app.component.html b/examples/angular/src/app/app.component.html index 6cf40dab0..9670b1835 100644 --- a/examples/angular/src/app/app.component.html +++ b/examples/angular/src/app/app.component.html @@ -1,12 +1,11 @@
-

NEAR Guest Book

- - +
+

{{showImport ? "Export Account" : "NEAR Guest Book"}}

+ +
+ +
diff --git a/examples/angular/src/app/app.component.ts b/examples/angular/src/app/app.component.ts index 96b99371f..040725e77 100644 --- a/examples/angular/src/app/app.component.ts +++ b/examples/angular/src/app/app.component.ts @@ -1,114 +1,10 @@ -import type { OnInit } from "@angular/core"; import { Component } from "@angular/core"; -import type { WalletSelector, AccountState } from "@near-wallet-selector/core"; -import { setupWalletSelector } from "@near-wallet-selector/core"; -import { setupDefaultWallets } from "@near-wallet-selector/default-wallets"; -import { setupSender } from "@near-wallet-selector/sender"; -import { setupXDEFI } from "@near-wallet-selector/xdefi"; -import { setupNearFi } from "@near-wallet-selector/nearfi"; -import { setupMathWallet } from "@near-wallet-selector/math-wallet"; -import { setupNightly } from "@near-wallet-selector/nightly"; -import { setupMeteorWallet } from "@near-wallet-selector/meteor-wallet"; -import { setupNarwallets } from "@near-wallet-selector/narwallets"; -import { setupWelldoneWallet } from "@near-wallet-selector/welldone-wallet"; -import { setupNightlyConnect } from "@near-wallet-selector/nightly-connect"; -import { setupWalletConnect } from "@near-wallet-selector/wallet-connect"; -import { setupCoin98Wallet } from "@near-wallet-selector/coin98-wallet"; -import { setupHereWallet } from "@near-wallet-selector/here-wallet"; -import { setupNeth } from "@near-wallet-selector/neth"; -import { setupOptoWallet } from "@near-wallet-selector/opto-wallet"; -import { setupFinerWallet } from "@near-wallet-selector/finer-wallet"; -import { setupNearWallet } from "@near-wallet-selector/near-wallet"; -// import { setupModal } from "@near-wallet-selector/modal-ui"; -// import type { WalletSelectorModal } from "@near-wallet-selector/modal-ui"; -import { setupModal } from "@near-wallet-selector/modal-ui-js"; -import type { WalletSelectorModal } from "@near-wallet-selector/modal-ui-js"; -import { CONTRACT_ID } from "../constants"; - -declare global { - interface Window { - selector: WalletSelector; - modal: WalletSelectorModal; - } -} @Component({ selector: "near-wallet-selector-root", templateUrl: "./app.component.html", styleUrls: ["./app.component.scss"], }) -export class AppComponent implements OnInit { - selector: WalletSelector; - modal: WalletSelectorModal; - accountId: string | null; - accounts: Array = []; - - async ngOnInit() { - await this.initialize().catch((err) => { - console.error(err); - alert("Failed to initialise wallet selector"); - }); - } - - async initialize() { - const _selector = await setupWalletSelector({ - network: "testnet", - debug: true, - modules: [ - ...(await setupDefaultWallets()), - setupNearWallet(), - setupSender(), - setupXDEFI(), - setupMathWallet(), - setupNightly(), - setupMeteorWallet(), - setupNarwallets(), - setupWelldoneWallet(), - setupHereWallet(), - setupCoin98Wallet(), - setupNearFi(), - setupNeth({ - bundle: false, - }), - setupOptoWallet(), - setupFinerWallet(), - setupWalletConnect({ - projectId: "c4f79cc...", - metadata: { - name: "NEAR Wallet Selector", - description: "Example dApp used by NEAR Wallet Selector", - url: "https://github.com/near/wallet-selector", - icons: ["https://avatars.githubusercontent.com/u/37784886"], - }, - }), - setupNightlyConnect({ - url: "wss://relay.nightly.app/app", - appMetadata: { - additionalInfo: "", - application: "NEAR Wallet Selector", - description: "Example dApp used by NEAR Wallet Selector", - icon: "https://near.org/wp-content/uploads/2020/09/cropped-favicon-192x192.png", - }, - }), - ], - }); - - const _modal = setupModal(_selector, { - contractId: CONTRACT_ID, - onHide: (hideReason) => { - console.log("The reason for hiding modal: ", hideReason); - }, - }); - const state = _selector.store.getState(); - - this.accounts = state.accounts; - this.accountId = - state.accounts.find((account) => account.active)?.accountId || null; - - window.selector = _selector; - window.modal = _modal; - - this.selector = _selector; - this.modal = _modal; - } +export class AppComponent { + showImport: boolean; } diff --git a/examples/angular/src/styles.scss b/examples/angular/src/styles.scss index f32a98dde..07cd459c3 100644 --- a/examples/angular/src/styles.scss +++ b/examples/angular/src/styles.scss @@ -5,6 +5,7 @@ } @import "../../../dist/packages/modal-ui-js/styles.css"; +@import "../../../dist/packages/account-export/styles.css"; html { --bg: #fff; @@ -44,99 +45,81 @@ body { padding: 0 1em; max-width: 40em; } - fieldset { border: none; margin: 0; padding: 0; } - .highlight { align-items: center; display: flex; margin-bottom: 0.5em; width: 100%; - - label { - margin-right: 0.5em; - } - - input { - caret-color: var(--secondary); - } } - +.highlight label { + margin-right: 0.5em; +} +.highlight input { + caret-color: var(--secondary); +} label { color: var(--gray); } - -button, -.highlight { +button, .highlight { border-radius: 5px; border-color: var(--primary); border: 0.1em solid var(--primary); padding: 0.5em 1em; - - &:hover, - &:focus, - &:focus-within { - border-color: var(--secondary); - } } - +button:hover, .highlight:hover, button:focus, .highlight:focus, button:focus-within, .highlight:focus-within { + border-color: var(--secondary); +} input { border: none; flex: 1; - - &:read-only { - color: var(--primary) - } } - +input:read-only { + color: var(--primary); +} input[type="number"] { text-align: center; border-bottom: 0.1em solid var(--primary); margin: 0 1em; width: 4em; padding-left: 0.5em; - - &:hover, - &:focus { - border-color: var(--secondary); - } } - +input[type="number"]:hover, input[type="number"]:focus { + border-color: var(--secondary); +} input[type="checkbox"] { margin: 0 1em; } - -button, -input { +button, input { background: transparent; color: inherit; cursor: pointer; font: inherit; outline: none; } - button { position: relative; transition: top 50ms; - - &:hover, - &:focus { - top: -1px; - } - - &:active { - background: var(--secondary); - border-color: var(--secondary); - top: 1px; - } } - +button:hover, button:focus { + top: -1px; +} +button:active { + background: var(--secondary); + border-color: var(--secondary); + top: 1px; +} .is-premium { border-left: 0.25em solid var(--secondary); padding-left: 0.25em; margin-left: -0.5em; -} \ No newline at end of file +} +.title-container { + display: flex; + align-items: center; + justify-content: space-between; +} From 3b6ff54cbe9523ff48d0170bde46058b430ce05f Mon Sep 17 00:00:00 2001 From: Kujtim Prenku Date: Wed, 1 Feb 2023 14:47:12 +0100 Subject: [PATCH 34/45] Fix color of loading component for light mode. --- .../wallet-selector-export/wallet-selector-export.component.ts | 1 - examples/react/pages/styles.css | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/examples/angular/src/app/pages/wallet-selector-export/wallet-selector-export.component.ts b/examples/angular/src/app/pages/wallet-selector-export/wallet-selector-export.component.ts index 25c433db8..b7471acdf 100644 --- a/examples/angular/src/app/pages/wallet-selector-export/wallet-selector-export.component.ts +++ b/examples/angular/src/app/pages/wallet-selector-export/wallet-selector-export.component.ts @@ -51,7 +51,6 @@ export class WalletSelectorExportComponent implements OnInit { const _selector = await setupWalletSelector({ network: "testnet", debug: true, - allowMultipleSelectors: true, modules: [ ...(await setupDefaultWallets()), setupNearWallet(), diff --git a/examples/react/pages/styles.css b/examples/react/pages/styles.css index 342680486..aaf368bd2 100644 --- a/examples/react/pages/styles.css +++ b/examples/react/pages/styles.css @@ -131,7 +131,7 @@ button:active { width: 13px; height: 13px; border-radius: 50%; - background: #fff; + background: var(--fg); animation-timing-function: cubic-bezier(0, 1, 1, 0); } .lds-ellipsis div:nth-child(1) { From e0c8ea9c7b366fe5c66c1fa2d598d8b6d6af7d41 Mon Sep 17 00:00:00 2001 From: DamirSQA Date: Wed, 1 Feb 2023 16:11:18 +0100 Subject: [PATCH 35/45] Removed onHide from setupModal --- .../src/app/pages/wallet-selector/wallet-selector.component.ts | 3 --- 1 file changed, 3 deletions(-) diff --git a/examples/angular/src/app/pages/wallet-selector/wallet-selector.component.ts b/examples/angular/src/app/pages/wallet-selector/wallet-selector.component.ts index f7e96309c..5f1aa2fa7 100644 --- a/examples/angular/src/app/pages/wallet-selector/wallet-selector.component.ts +++ b/examples/angular/src/app/pages/wallet-selector/wallet-selector.component.ts @@ -93,9 +93,6 @@ export class WalletSelectorComponent implements OnInit { const _modal = setupModal(_selector, { contractId: CONTRACT_ID, - onHide: (hideReason) => { - console.log("The reason for hiding modal: ", hideReason); - }, }); const state = _selector.store.getState(); From 9ea7d960e6eec952e277a0951f6fc07d44cd48cb Mon Sep 17 00:00:00 2001 From: DamirSQA Date: Wed, 1 Feb 2023 16:17:19 +0100 Subject: [PATCH 36/45] removed unused component --- .../components/export-account/export-account.component.ts | 8 -------- 1 file changed, 8 deletions(-) delete mode 100644 examples/angular/src/app/components/export-account/export-account.component.ts diff --git a/examples/angular/src/app/components/export-account/export-account.component.ts b/examples/angular/src/app/components/export-account/export-account.component.ts deleted file mode 100644 index 5d214a3ac..000000000 --- a/examples/angular/src/app/components/export-account/export-account.component.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { Component } from "@angular/core"; - -@Component({ - selector: "near-wallet-selector-export-account", - templateUrl: "./export-account.component.html", - styleUrls: ["./export-account.component.scss"], -}) -export class ExportAccountComponent {} From 609ab889d58ac4beb943c368455532563c49bc98 Mon Sep 17 00:00:00 2001 From: Danny Cho Date: Thu, 2 Feb 2023 14:50:45 +1300 Subject: [PATCH 37/45] fix: passing selected accounts only to importAccountsInSecureContext --- .../account-export/src/lib/components/ExportAccount.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/account-export/src/lib/components/ExportAccount.tsx b/packages/account-export/src/lib/components/ExportAccount.tsx index 26cc48897..0e665b188 100644 --- a/packages/account-export/src/lib/components/ExportAccount.tsx +++ b/packages/account-export/src/lib/components/ExportAccount.tsx @@ -269,7 +269,11 @@ export const ExportAccount: React.FC = ({ const injectedWalletInterface = async () => { if (importAccountsInSecureContext) { - await importAccountsInSecureContext({ accounts }); + await importAccountsInSecureContext({ + accounts: accounts.filter(({ accountId }) => + selectedAccounts.includes(accountId) + ), + }); } else { setStep(EXPORT_ACCOUNT_STEPS.NO_INTERFACE); } From eb7d729203e48a47c3d18814088d200bdd79992b Mon Sep 17 00:00:00 2001 From: Danny Cho Date: Thu, 2 Feb 2023 14:55:05 +1300 Subject: [PATCH 38/45] style: Cosmatic improvements on account-export --- .../src/lib/components/AccountSelect.tsx | 22 ++++++++++++------- .../src/lib/components/Complete.tsx | 21 ++++++++++-------- .../src/lib/components/ExportAccount.tsx | 7 +++++- packages/account-export/src/lib/styles.css | 13 ++++++++--- packages/core/src/lib/locale/en.json | 3 ++- 5 files changed, 44 insertions(+), 22 deletions(-) diff --git a/packages/account-export/src/lib/components/AccountSelect.tsx b/packages/account-export/src/lib/components/AccountSelect.tsx index 747fdeda4..bdba5fda0 100644 --- a/packages/account-export/src/lib/components/AccountSelect.tsx +++ b/packages/account-export/src/lib/components/AccountSelect.tsx @@ -14,6 +14,7 @@ interface AccountSelectProps { disabledAccounts: Array; onNextStep: () => void; isLoading: boolean; + buttonLabel: string; } interface WarningLabelProp { @@ -61,6 +62,7 @@ export const AccountSelect: React.FC = ({ disabledAccounts, onNextStep, isLoading, + buttonLabel, }) => { const onAccountSelect = (accountId: string, checked: boolean) => { if (checked) { @@ -89,11 +91,13 @@ export const AccountSelect: React.FC = ({ return ( - +
+ +
{isLoading ? ( @@ -121,7 +125,9 @@ export const AccountSelect: React.FC = ({ name={accountId} value={accountId} /> - +
))} @@ -144,7 +150,7 @@ export const AccountSelect: React.FC = ({ value={accountId} disabled /> -