Merge pull request #667 from near/dev

v7.6.1 Release (dev -> main)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "near-wallet-selector",
-  "version": "7.6.0",
+  "version": "7.6.1",
   "description": "NEAR Wallet Selector makes it easy for users to interact with your dApp by providing an abstraction over various wallets within the NEAR ecosystem",
   "keywords": [
     "near",

packages/account-export/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@near-wallet-selector/account-export",
-  "version": "7.6.0",
+  "version": "7.6.1",
   "peerDependencies": {
     "near-api-js": "^0.44.2 || ^1.0.0"
   }

packages/account-export/src/lib/components/AccountSelect.tsx

@@ -1,7 +1,9 @@
+import type { ReactElement } from "react";
 import React, { Fragment } from "react";
 import { translate } from "@near-wallet-selector/core";
 import { ModalHeader } from "./ModalHeader";
 import type { ExportAccountData } from "./ExportAccount";
+import { ACCESS_KEY_TYPES } from "./ExportAccount";
 
 interface AccountSelectProps {
   onCloseModal: () => void;
@@ -14,9 +16,42 @@ interface AccountSelectProps {
   isLoading: boolean;
 }
 
+interface WarningLabelProp {
+  hasBalance: boolean;
+  type: string;
+}
+
 const LOADING_ICON_DATA_URL =
   "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAR3SURBVHgBpVZ9aJVVGH+e55z33bi7zY9hMz+yMAeNoEIq6A9ZRKQWEsQNFIIpsf5Y9E+GsD9iBEEDMUkDa6ShRKKZYIWiRkaKaUGUGCKOTGMF84PNO99773vOefq9720yK5ZzD/dwPt/nd37P17lEk5Qnuz9roUkKT7T5bNe+QjTNLCHv24h1Xgh+OmtwQYPH2jUXwlnW9NRooqePfLS6MmmQ59cdeEGJlkJZA5MGVecoAwghBYZTVY9ftuaDSy8x8w9fbFl95JZAXuw9dmelkvRAyXxS7wMFryG4bIyWZiqzPgMhaFfGfn3NY3AZG9sPf/Dy8HidZvxkZc/h1pqnPlKey6yspMqUd9jVAEYY6RCGDQTwjGDwGTgAlbwRijV1C9vanz577tT+6r+YrOz5rlXFrQ/qZ+FbDxCfXS5oOgxln4v473f3rbgwdn7FK5/MCaH2eAg6X8g3K2iBMTiBkNJVKbod+ze9mgPZsY/UaicYzCE1HgpZc558olCTjTvWLxv9p1n3bV45iO7T5zq3TU9j9xTOLwQ5D9t48aEYrtGj2P/2BpNS78nZJoRdlDsYd8vphz273lqyhW5Rnlnz3hOe6SEwghvxPUMTVfYe2rpuUOqOkZeIxdSbsSJ8eTIAmXy5tftrMPkzi0C4B2ZDNHp+INvLQURkhYiJ6gDGko376DbEJ8k3mcnYBSeSM2ptL/XGsurNnxfnDIQNwCKADO1845Ef6Tbk0M51g4joMgncDyBmkrtsNEMQovcDxGYsGL2yDNAUxPv0VySs4yxhfeYbabJg0Awg+ILylEB6nKMpSOp0WCR1+QSuD4ELljNDEfyRrdXPCU1BTEgD7pyOzVmC2iBm0KgYAMCEeXovoClIjdKiVdQ3FYbzmatxWRqMPcNsDHyfNWskWk5TkJhNEwVyxA6hLL5clLJsW7voFxa6LiR5CCOeWzo3XFxKtyEdy3tnp7VahAoDp6PEVGvJye09l3P7K9k9WQijXBv4B6WG+0pvD0ybFEBHZ6OPh+/OGaBsIvNRAGp/ZHv1jJeon+omszBkFsr3FhsLB7rev3JLQKVSyfjmaW2BJSavDlqR7c5VrR+4AbLttbkXMehH7gjA8gZiD/tq+Or/ABZ3dUW/J62LcPUGcrW8pKSVFAg6cHz3O0l25qZHa/XGwWPg9aAwwzdZAaDX+7tbNsMYf5+bpaUS0dDQEF8rtsUxCbI5e5KRzGhBMiqNxllKju7d8NOYXjseRBytQngcVDL3wD9H+7vf3YS7mnnzqrZpwSxrwkh04cpM5NTMyJdHbIgaESyxJ6tZ5cDbw3qd0tqVCp25Se/4yYdr5/zm/ehjwvpxZHgN0Wlub0/Yt7awdykqRYFHy6NUQVrBd4o6p6ngrVL2Bo8ksuJqoXzq9Ln9m6rj9U74b6Wjo8OeP082aY5NUxRsYzwDkeFsU+MdUU3U4PG0QtbahqhadDMuHTy4fvS/9EwIUpdeuW/ZiShOipFxURRbNdWETFMRZrCFlEZGkuPHdycTafgLExNiI6YfUpcAAAAASUVORK5CYII=";
 
+const getWarningLabel = ({
+  hasBalance,
+  type,
+}: WarningLabelProp): ReactElement | null => {
+  if (type === ACCESS_KEY_TYPES.UNKNOWN) {
+    return (
+      <span className="error">
+        {translate("modal.exportAccounts.selectAccounts.error")}
+      </span>
+    );
+  }
+  if (type === ACCESS_KEY_TYPES.LEDGER) {
+    return (
+      <span className="warning">
+        {translate("modal.exportAccounts.selectAccounts.warningLedger")}
+      </span>
+    );
+  }
+  if (!hasBalance) {
+    return (
+      <span className="warning">
+        {translate("modal.exportAccounts.selectAccounts.noBalance")}
+      </span>
+    );
+  }
+  return null;
+};
+
 export const AccountSelect: React.FC<AccountSelectProps> = ({
   onCloseModal,
   onBack,
@@ -95,7 +130,7 @@ export const AccountSelect: React.FC<AccountSelectProps> = ({
                 {translate("modal.exportAccounts.selectAccounts.unavailable")}
               </span>
               <div className="account-selection">
-                {disabledAccounts.map(({ accountId }) => (
+                {disabledAccounts.map(({ accountId, type, hasBalance }) => (
                   <div className="account-selection-row" key={accountId}>
                     <div className="checkbox">
                       <input
@@ -109,7 +144,10 @@ export const AccountSelect: React.FC<AccountSelectProps> = ({
                         value={accountId}
                         disabled
                       />
-                      <label htmlFor={accountId}> {accountId}</label>
+                      <label htmlFor={accountId}>
+                        <span>{accountId}</span>
+                        {getWarningLabel({ hasBalance, type })}
+                      </label>
                     </div>
                   </div>
                 ))}

packages/account-export/src/lib/components/ExportAccount.tsx

@@ -43,7 +43,7 @@ const EXPORT_ACCOUNT_STEPS = {
   COMPLETE: "COMPLETE",
 };
 
-const ACCESS_KEY_TYPES = {
+export const ACCESS_KEY_TYPES = {
   LEDGER: "Ledger",
   FULL_ACCESS_KEY: "Full Access Key",
   MULTI_SIG: "Multi-Sig",

packages/account-export/src/lib/styles.css

@@ -34,9 +34,10 @@
 
 .nws-modal-wrapper .nws-modal .nws-modal-body button.middleButton:disabled,
 .nws-modal-wrapper .nws-modal .nws-modal-body button.middleButton[disabled]{
-  border-color: var(--secondary-button-border-color);
-  background-color: var(--secondary-button-bg-color);
   cursor: not-allowed;
+  background-color: var(--wallet-selector-home-button-bg, var(--home-button-bg));
+  color: #606060;
+  border: none;
 }
 
 
@@ -46,15 +47,14 @@
 }
 
 .checkbox {
-  width: 100%;
   position: relative;
   display: block;
 }
 
 .checkbox label {
   position: relative;
   display: block;
-  padding-left: 50px;
+  padding-left: 40px;
   margin-bottom: 0;
   cursor: pointer;
   color: var(--wallet-selector-heading-color, var(--heading-color));
@@ -111,6 +111,18 @@
 .checkbox input[type="checkbox"]:disabled + label {
   color: var(--wallet-selector-text-color, var(--text-color));
   cursor: not-allowed;
+  display: flex;
+  flex-direction: column;
+}
+
+.checkbox input[type="checkbox"]:disabled + label > span.error {
+  color: var(--wallet-selector-error, var(--error));
+  font-size: 10px;
+}
+
+.checkbox input[type="checkbox"]:disabled + label > span.warning {
+  color: #E9B870;
+  font-size: 10px;
 }
 
 .checkbox input[type="checkbox"]:disabled + label::before {
@@ -156,6 +168,7 @@
 
 .account-export {
   height: 100%;
+  margin-top: 15px !important;
 }
 
 .account-export .content {
@@ -185,7 +198,7 @@
   width: 100%;
   max-height: 200px;
   overflow-y: auto;
-  margin-top: 20px;
+  margin: 20px 0;
 }
 
 .account-export .account-select-all {
@@ -208,15 +221,20 @@
   flex-direction: row;
   align-items: center;
   width: 100%;
-  padding: 0 12px;
-  margin-bottom: 24px;
+  padding: 15px 12px;
+  border-bottom: 1px solid #313030;
+}
+
+.account-export .account-selection .account-selection-row label {
+  display: flex;
+  flex-direction: column;
 }
 
 .account-export .passphrase-title {
-  font-size: 14px;
+  font-size: 15px;
   text-align: center;
-  font-weight: 400;
-  color: #c1c1c1;
+  font-weight: 500;
+  color: var(--wallet-selector-text-color, var(--text-color));
   margin: 40px 0 30px;
 }
 
@@ -236,8 +254,9 @@
 }
 
 .account-export .passphrase-label {
-  font-size: 10px;
+  font-size: 12px;
   cursor: copy;
+  color: var(--wallet-selector-text-color, var(--text-color));
 }
 
 .account-export .complete-desc {

packages/coin98-wallet/package.json

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

packages/coin98-wallet/src/lib/coin98-wallet.ts

@@ -49,14 +49,24 @@ const Coin98Wallet: WalletBehaviourFactory<InjectedWallet> = async ({
 }) => {
   const _state = setupCoin98WalletState();
 
-  const getAccounts = (): Array<Account> => {
+  const getAccounts = async (): Promise<Array<Account>> => {
     const accountId = _state.wallet.near.account;
 
     if (!accountId) {
       return [];
     }
 
-    return [{ accountId: _state.wallet.near.account }];
+    return [
+      {
+        accountId: _state.wallet.near.account,
+        publicKey: (
+          await _state.wallet.near.signer.getPublicKey(
+            accountId,
+            options.network.networkId
+          )
+        ).toString(),
+      },
+    ];
   };
 
   const transformTransactions = (
@@ -85,7 +95,7 @@ const Coin98Wallet: WalletBehaviourFactory<InjectedWallet> = async ({
 
   return {
     async signIn({ contractId }) {
-      const existingAccounts = getAccounts();
+      const existingAccounts = await getAccounts();
 
       if (existingAccounts.length) {
         return existingAccounts;

packages/core/README.md

@@ -45,6 +45,7 @@ const selector = await setupWalletSelector({
   - `indexerUrl` (`string`): Custom URL for the Indexer service.
 - `debug` (`boolean?`): Enable internal logging for debugging purposes. Defaults to `false`.
 - `optimizeWalletOrder` (`boolean?`): Enable automatic wallet order. Reorders last signed in wallet on top, then installed wallets over not installed and deprecated wallets.
+- `allowMultipleSelectors` (`boolean?`): Optionally allow creating new instances of wallet selector.
 - `storage` (`StorageService?`): Async storage implementation. Useful when [`localStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) is unavailable. Defaults to `localStorage`.
 - `modules` (`Array<WalletModuleFactory>`): List of wallets to support in your dApp.
 

packages/core/docs/api/wallet.md

@@ -181,7 +181,7 @@ Returns one or more accounts when signed in. This method can be useful for walle
 (async () => {
   const wallet = await selector.wallet("sender");
   const accounts = await wallet.getAccounts();
-  console.log(accounts); // [{ accountId: "test.testnet" }]
+  console.log(accounts); // [{ accountId: "test.testnet", publicKey: "..." }]
 })();
 ```
 

packages/core/package.json

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

packages/core/src/lib/locale/en.json

@@ -75,12 +75,15 @@
         "button": "Get Passphrase",
         "deselectAll": "Deselect All",
         "selectAll": "Select All",
-        "unavailable": "Transfer Unavailable"
+        "unavailable": "Transfer Unavailable",
+        "error": "Account does not exist",
+        "warningLedger": "Ledger support required",
+        "noBalance": "Account not funded"
       },
       "getPassphrase": {
         "title": "Copy Temporary Password",
         "desc": "You’ll need to enter this password when you begin exporting your accounts to a different wallet.",
-        "button": "Transfer Accounts",
+        "button": "Continue",
         "label": "Click to Copy",
         "checkLabel": "I copied or wrote down the password"
       },