Merge pull request #833 from near/dev

v8.1.4 Release (dev -> main)
near · Jun 14, 2023 · a5b487d · a5b487d
2 parents 8fd296f + 297dc70
commit a5b487d
Show file tree

Hide file tree

Showing 32 changed files with 177 additions and 109 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "near-wallet-selector",
-  "version": "8.1.3",
+  "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",

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.3",
+  "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>

diff --git a/packages/account-export/src/lib/styles.css b/packages/account-export/src/lib/styles.css
@@ -40,13 +40,21 @@
   cursor: not-allowed;
   background-color: var(--wallet-selector-home-button-bg, var(--home-button-bg));
   color: #606060;
-  border: none;
+  border: 1px solid transparent;
 }
 
 
 .nws-modal-wrapper .nws-modal .nws-modal-body button.middleButton.account-export-button {
-  width: 240px;
-  margin-bottom: 30px;
+  width: 300px;
+  margin: 0 auto;
+}
+
+.nws-modal-wrapper .nws-modal .nws-modal-body button.middleButton.account-export-button.secondary {
+  background: var( --secondary-button-bg-color);
+  border: 1px solid var(--secondary-button-border-color);
+  border-radius: 4px;
+  color: var(--secondary-button-text-color);
+  margin-bottom: 10px;
 }
 
 .checkbox {
@@ -137,9 +145,13 @@
 .nws-modal-wrapper .nws-modal .nws-modal-body .click-to-copy {
   position: relative;
   cursor: copy;
-  background-color: transparent;
+  background-color: var(--wallet-selector-content-bg, var(--content-bg));
   display: block;
   margin: 0 auto;
+  border-radius: 8px;
+  border: 1px solid var(--wallet-option-border-color, var(--sidebar-border-color));
+  padding: 0;
+  filter: brightness(95%);
 }
 
 .nws-modal-wrapper .nws-modal .nws-modal-body .click-to-copy > .copy-success {
@@ -180,7 +192,7 @@
 .account-export .content {
   width: 100%;
   height: 100%;
-  padding: 40px 28px 0px;
+  padding: 25px 0 0 !important;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -209,6 +221,12 @@
   margin: 20px 0;
 }
 
+.account-export .account-selection-container {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+}
+
 .account-export .account-select-all {
   width: 100%;
   text-align: left;
@@ -229,7 +247,7 @@
   flex-direction: row;
   align-items: center;
   width: 100%;
-  border-bottom: 1px solid #313030;
+  border-bottom: 1px solid rgba(60,60,60,0.22);
 }
 
 .account-export .account-selection .account-selection-row label {
@@ -242,10 +260,14 @@
   width: 399px;
 }
 
+.account-export .checkbox .label {
+  font-size: 14px;
+}
+
 .account-export .passphrase-title {
-  font-size: 15px;
+  font-size: 14px;
   text-align: center;
-  font-weight: 500;
+  font-weight: 300;
   color: var(--wallet-selector-text-color, var(--text-color));
   margin: 40px 0 30px;
 }
@@ -254,25 +276,30 @@
   display: flex;
   flex-direction: row;
   align-items: flex-start;
-  padding: 20px;
 
-  background: #272729;
-  border-radius: 8px;
+  background: transparent;
 
   word-break: break-word;
   text-align: center;
 
   filter: blur(4px);
+  padding: 20px;
+  border-radius: 5px;
 }
 
 .account-export .passphrase-text:hover {
   filter: none;
 }
 
+.account-export .passphrase-check-container {
+  margin-bottom: 20px;
+}
+
 .account-export .passphrase-label {
-  font-size: 12px;
+  font-size: 10px;
   cursor: copy;
   color: var(--wallet-selector-text-color, var(--text-color));
+  margin-top: 10px;
 }
 
 .complete-desc {
@@ -281,6 +308,12 @@
   margin-top: 10px;
 }
 
+.complete-desc .content {
+  font-size: 14px;
+  width: 300px;
+  margin: 40px auto 0;
+}
+
 .nws-modal-wrapper .nws-modal .connecting-wrapper-err {
   height: 100%;
 }
diff --git a/packages/coin98-wallet/package.json b/packages/coin98-wallet/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@near-wallet-selector/coin98-wallet",
-  "version": "8.1.3",
+  "version": "8.1.4",
   "description": "Coin 98 wallet package for NEAR Wallet Selector.",
   "keywords": [
     "near",