Merge branch 'dev' into SQC-540/add-signin-multi

near · Jun 27, 2023 · f910c39 · f910c39
2 parents 8121e5e + 7d6ee0b
commit f910c39
Show file tree

Hide file tree

Showing 40 changed files with 265 additions and 258 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "near-wallet-selector",
-  "version": "8.1.1",
+  "version": "8.1.4",
   "description": "NEAR Wallet Selector makes it easy for users to interact with your dApp by providing an abstraction over various wallets within the NEAR ecosystem",
   "keywords": [
     "near",
@@ -88,11 +88,11 @@
     "@ledgerhq/hw-transport": "6.27.1",
     "@ledgerhq/hw-transport-webhid": "6.27.1",
     "@metamask/detect-provider": "^2.0.0",
-    "@meteorwallet/sdk": "^0.6.0",
+    "@meteorwallet/sdk": "^0.8.0",
     "@nightlylabs/connect-near": "0.0.15",
-    "@walletconnect/sign-client": "2.7.2",
+    "@walletconnect/sign-client": "2.7.8",
     "@web3modal/standalone": "^2.2.2",
-    "better-sqlite3": "^8.2.0",
+    "better-sqlite3": "^8.4.0",
     "big.js": "^6.1.1",
     "bn.js": "^5.2.0",
     "bs58": "^5.0.0",
@@ -115,7 +115,7 @@
     "rxjs": "^7.8.1",
     "stream-browserify": "^3.0.0",
     "stream-http": "^3.2.0",
-    "tslib": "^2.3.0",
+    "tslib": "^2.5.2",
     "tweetnacl": "^1.0.3",
     "tweetnacl-util": "^0.15.1",
     "url": "^0.11.0",
@@ -163,7 +163,7 @@
     "@types/w3c-web-usb": "^1.0.5",
     "@typescript-eslint/eslint-plugin": "5.13.0",
     "@typescript-eslint/parser": "5.13.0",
-    "@walletconnect/types": "^2.7.2",
+    "@walletconnect/types": "^2.7.8",
     "babel-jest": "27.2.3",
     "cypress": "^9.1.0",
     "eslint": "~8.15.0",

diff --git a/packages/account-export/README.md b/packages/account-export/README.md
@@ -1,6 +1,6 @@
 # @near-wallet-selector/account-export
 
-This is the Export Selector UI package for NEAR Wallet Selector.
+This is the Account Export Selector UI package for NEAR Wallet Selector.
 
 ## Installation and Usage
 
@@ -45,9 +45,14 @@ modal.show();
 - `description` (`string?`): Define a custom description in the UI.
 - `onComplete` (`(accounts: Array<string>) => void`): Triggers when the user completes the flow. By default it is not set.
 
-## Styles & Customizing CSS
+### Supported Wallets
+ - [Nightly Wallet](https://github.com/near/wallet-selector/blob/main/packages/nightly/src/lib/nightly.ts#L224)
+ - [Meteor Wallet](https://github.com/near/wallet-selector/blob/main/packages/meteor-wallet/src/lib/meteor-wallet.ts#L204)
+ - [Welldone Wallet](https://github.com/near/wallet-selector/blob/main/packages/welldone-wallet/src/lib/welldone.ts#L335)
+ - [Here Wallet](https://github.com/near/wallet-selector/blob/main/packages/here-wallet/src/lib/selector.ts#LL42)
+ - [My Near Wallet](https://github.com/near/wallet-selector/blob/main/packages/my-near-wallet/src/lib/my-near-wallet.ts#L227)
 
-Import modal css styles:
+## Styles & Customizing CSS
 
 ### React & Vue
 

diff --git a/packages/account-export/package.json b/packages/account-export/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@near-wallet-selector/account-export",
-  "version": "8.1.1",
+  "version": "8.1.4",
   "description": "This is the Export Selector UI package for NEAR Wallet Selector.",
   "keywords": [
     "near",

diff --git a/packages/account-export/src/lib/components/AccountSelect.tsx b/packages/account-export/src/lib/components/AccountSelect.tsx
@@ -1,4 +1,5 @@
 import type { ReactElement } from "react";
+import { useEffect } from "react";
 import React, { Fragment } from "react";
 import { translate } from "@near-wallet-selector/core";
 import { ModalHeader } from "./ModalHeader";
@@ -89,6 +90,14 @@ export const AccountSelect: React.FC<AccountSelectProps> = ({
       ? translate("modal.exportAccounts.selectAccounts.deselectAll")
       : translate("modal.exportAccounts.selectAccounts.selectAll");
 
+  useEffect(() => {
+    // Select all available accounts by default
+    if (!selectedAccounts.length) {
+      setSelectedAccounts(accountsWithDetail.map(({ accountId }) => accountId));
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [accountsWithDetail.length]);
+
   return (
     <Fragment>
       <div className="nws-modal-header-wrapper">
@@ -108,63 +117,70 @@ export const AccountSelect: React.FC<AccountSelectProps> = ({
             </div>
           ) : (
             <>
-              <span className="account-select-all" onClick={onSelectAll}>
-                {selectLabel}
-              </span>
-              <div className="account-selection">
-                {accountsWithDetail.map(({ accountId }) => (
-                  <div className="account-selection-row" key={accountId}>
-                    <div className="checkbox">
-                      <input
-                        onChange={(e) => {
-                          onAccountSelect(accountId, e.target.checked);
-                        }}
-                        checked={selectedAccounts.includes(accountId)}
-                        type="checkbox"
-                        id={accountId}
-                        name={accountId}
-                        value={accountId}
-                      />
-                      <label htmlFor={accountId} title={accountId}>
-                        {accountId}
-                      </label>
+              <div className="account-selection-container">
+                <span className="account-select-all" onClick={onSelectAll}>
+                  {selectLabel}
+                </span>
+                <div className="account-selection">
+                  {accountsWithDetail.map(({ accountId }) => (
+                    <div className="account-selection-row" key={accountId}>
+                      <div className="checkbox">
+                        <input
+                          onChange={(e) => {
+                            onAccountSelect(accountId, e.target.checked);
+                          }}
+                          checked={selectedAccounts.includes(accountId)}
+                          type="checkbox"
+                          id={accountId}
+                          name={accountId}
+                          value={accountId}
+                        />
+                        <label htmlFor={accountId} title={accountId}>
+                          <span className="label">{accountId}</span>
+                        </label>
+                      </div>
                     </div>
-                  </div>
-                ))}
+                  ))}
+                </div>
+                {disabledAccounts.length > 0 && (
+                  <>
+                    <span className="account-unavailable">
+                      {translate(
+                        "modal.exportAccounts.selectAccounts.unavailable"
+                      )}
+                    </span>
+                    <div className="account-selection">
+                      {disabledAccounts.map(
+                        ({ accountId, type, hasBalance }) => (
+                          <div
+                            className="account-selection-row"
+                            key={accountId}
+                          >
+                            <div className="checkbox">
+                              <input
+                                onChange={(e) => {
+                                  onAccountSelect(accountId, e.target.checked);
+                                }}
+                                checked={selectedAccounts.includes(accountId)}
+                                type="checkbox"
+                                id={accountId}
+                                name={accountId}
+                                value={accountId}
+                                disabled
+                              />
+                              <label htmlFor={accountId} title={accountId}>
+                                <span className="account-id">{accountId}</span>
+                                {getWarningLabel({ hasBalance, type })}
+                              </label>
+                            </div>
+                          </div>
+                        )
+                      )}
+                    </div>
+                  </>
+                )}
+                <div className="filler" />
               </div>
-              {disabledAccounts.length > 0 && (
-                <>
-                  <span className="account-unavailable">
-                    {translate(
-                      "modal.exportAccounts.selectAccounts.unavailable"
-                    )}
-                  </span>
-                  <div className="account-selection">
-                    {disabledAccounts.map(({ accountId, type, hasBalance }) => (
-                      <div className="account-selection-row" key={accountId}>
-                        <div className="checkbox">
-                          <input
-                            onChange={(e) => {
-                              onAccountSelect(accountId, e.target.checked);
-                            }}
-                            checked={selectedAccounts.includes(accountId)}
-                            type="checkbox"
-                            id={accountId}
-                            name={accountId}
-                            value={accountId}
-                            disabled
-                          />
-                          <label htmlFor={accountId} title={accountId}>
-                            <span>{accountId}</span>
-                            {getWarningLabel({ hasBalance, type })}
-                          </label>
-                        </div>
-                      </div>
-                    ))}
-                  </div>
-                </>
-              )}
-              <div className="filler" />
               <button
                 className="middleButton account-export-button"
                 onClick={onNextStep}

diff --git a/packages/account-export/src/lib/components/Complete.tsx b/packages/account-export/src/lib/components/Complete.tsx
@@ -6,12 +6,14 @@ interface CompleteProps {
   onComplete: () => void;
   onCloseModal: () => void;
   onBack: () => void;
+  onStartOver: () => void;
 }
 
 export const Complete: React.FC<CompleteProps> = ({
   onComplete,
   onBack,
   onCloseModal,
+  onStartOver,
 }) => {
   const onClick = () => {
     onComplete();
@@ -28,10 +30,20 @@ export const Complete: React.FC<CompleteProps> = ({
         />
       </div>
       <div className="complete-desc">
-        <h4>{translate("modal.exportAccounts.complete.descOne")}</h4>
-        <h4>{translate("modal.exportAccounts.complete.descTwo")}</h4>
+        <h4 className="content">
+          {translate("modal.exportAccounts.complete.descOne")}
+        </h4>
+        <h4 className="content">
+          {translate("modal.exportAccounts.complete.descTwo")}
+        </h4>
       </div>
 
+      <button
+        className="middleButton account-export-button secondary"
+        onClick={onStartOver}
+      >
+        {translate("modal.exportAccounts.complete.startOverButton")}
+      </button>
       <button className="middleButton account-export-button" onClick={onClick}>
         {translate("modal.exportAccounts.complete.button")}
       </button>

diff --git a/packages/account-export/src/lib/components/ExportAccount.tsx b/packages/account-export/src/lib/components/ExportAccount.tsx
@@ -354,6 +354,7 @@ export const ExportAccount: React.FC<ExportAccountProps> = ({
           onCloseModal={onCloseModal}
           onBack={showPassPhrase}
           onComplete={onTransferComplete}
+          onStartOver={onBack}
         />
       )}
     </Fragment>

diff --git a/packages/account-export/src/lib/components/Passphrase.tsx b/packages/account-export/src/lib/components/Passphrase.tsx
@@ -56,25 +56,29 @@ export const Passphrase: React.FC<PassphraseProps> = ({
             {translate("modal.exportAccounts.getPassphrase.label")}
           </label>
           <div className="filler" />
-          <div className="checkbox">
-            <input
-              onChange={onCheck}
-              checked={hasCopied}
-              type="checkbox"
-              id="passphrase-check"
-              name="passphrase-check"
-              value="passphrase-check"
-            />
-            <label htmlFor="passphrase-check">
-              {translate("modal.exportAccounts.getPassphrase.checkLabel")}
-            </label>
+          <div className="passphrase-check-container">
+            <div className="checkbox">
+              <input
+                onChange={onCheck}
+                checked={hasCopied}
+                type="checkbox"
+                id="passphrase-check"
+                name="passphrase-check"
+                value="passphrase-check"
+              />
+              <label htmlFor="passphrase-check">
+                <span className="label">
+                  {translate("modal.exportAccounts.getPassphrase.checkLabel")}
+                </span>
+              </label>
+            </div>
           </div>
           <button
             className="middleButton account-export-button"
             onClick={onButtonClick}
             disabled={!hasCopied}
           >
-            {translate("modal.exportAccounts.getPassphrase.button")}
+            {translate("modal.exportAccounts.getPassphrase.transferButton")}
           </button>
         </div>
       </div>