From b1e61d94a3feabe37d53d8db8d6564f4f1f1b277 Mon Sep 17 00:00:00 2001 From: Danny Cho Date: Wed, 14 Jun 2023 13:52:06 +1200 Subject: [PATCH 1/3] feat: UI/UX improvements on account export --- .../src/lib/components/AccountSelect.tsx | 126 ++++++++++-------- .../src/lib/components/Passphrase.tsx | 30 +++-- packages/account-export/src/lib/styles.css | 43 ++++-- packages/core/src/lib/locale/en.json | 3 +- 4 files changed, 121 insertions(+), 81 deletions(-) diff --git a/packages/account-export/src/lib/components/AccountSelect.tsx b/packages/account-export/src/lib/components/AccountSelect.tsx index 9fa395a9e..a82dcabd4 100644 --- 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 = ({ ? 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 (
@@ -108,63 +117,70 @@ export const AccountSelect: React.FC = ({
) : ( <> - - {selectLabel} - -
- {accountsWithDetail.map(({ accountId }) => ( -
-
- { - onAccountSelect(accountId, e.target.checked); - }} - checked={selectedAccounts.includes(accountId)} - type="checkbox" - id={accountId} - name={accountId} - value={accountId} - /> - +
+ + {selectLabel} + +
+ {accountsWithDetail.map(({ accountId }) => ( +
+
+ { + onAccountSelect(accountId, e.target.checked); + }} + checked={selectedAccounts.includes(accountId)} + type="checkbox" + id={accountId} + name={accountId} + value={accountId} + /> + +
-
- ))} + ))} +
+ {disabledAccounts.length > 0 && ( + <> + + {translate( + "modal.exportAccounts.selectAccounts.unavailable" + )} + +
+ {disabledAccounts.map( + ({ accountId, type, hasBalance }) => ( +
+
+ { + onAccountSelect(accountId, e.target.checked); + }} + checked={selectedAccounts.includes(accountId)} + type="checkbox" + id={accountId} + name={accountId} + value={accountId} + disabled + /> + +
+
+ ) + )} +
+ + )} +
- {disabledAccounts.length > 0 && ( - <> - - {translate( - "modal.exportAccounts.selectAccounts.unavailable" - )} - -
- {disabledAccounts.map(({ accountId, type, hasBalance }) => ( -
-
- { - onAccountSelect(accountId, e.target.checked); - }} - checked={selectedAccounts.includes(accountId)} - type="checkbox" - id={accountId} - name={accountId} - value={accountId} - disabled - /> - -
-
- ))} -
- - )} -
diff --git a/packages/account-export/src/lib/styles.css b/packages/account-export/src/lib/styles.css index 76910e0e5..42e111e32 100644 --- a/packages/account-export/src/lib/styles.css +++ b/packages/account-export/src/lib/styles.css @@ -40,13 +40,13 @@ 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; } .checkbox { @@ -137,9 +137,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 +184,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 +213,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 +239,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 +252,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 +268,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 { diff --git a/packages/core/src/lib/locale/en.json b/packages/core/src/lib/locale/en.json index be73c3cfd..5f8d91b21 100644 --- a/packages/core/src/lib/locale/en.json +++ b/packages/core/src/lib/locale/en.json @@ -80,7 +80,7 @@ }, "selectAccounts": { "title": "Select Accounts to Transfer", - "button": "Get Passphrase", + "button": "Continue", "deselectAll": "Deselect All", "selectAll": "Select All", "unavailable": "Transfer Unavailable", @@ -92,6 +92,7 @@ "title": "Copy Temporary Password", "desc": "You’ll need to enter this password when you begin exporting your accounts to a different wallet.", "button": "Continue", + "transferButton": "Transfer Accounts", "label": "Click to Copy", "checkLabel": "I copied or wrote down the password" }, From 851fb9be2c2e9fc54c0886a1b80e906368b90ace Mon Sep 17 00:00:00 2001 From: Danny Cho Date: Wed, 14 Jun 2023 15:07:13 +1200 Subject: [PATCH 2/3] feat: UI/UX update on complete back with start over button --- .../src/lib/components/Complete.tsx | 16 ++++++++++++++-- .../src/lib/components/ExportAccount.tsx | 1 + packages/account-export/src/lib/styles.css | 14 ++++++++++++++ packages/core/src/lib/locale/en.json | 1 + 4 files changed, 30 insertions(+), 2 deletions(-) diff --git a/packages/account-export/src/lib/components/Complete.tsx b/packages/account-export/src/lib/components/Complete.tsx index 7d73f591b..e92f4a2c0 100644 --- 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 = ({ onComplete, onBack, onCloseModal, + onStartOver, }) => { const onClick = () => { onComplete(); @@ -28,10 +30,20 @@ export const Complete: React.FC = ({ />
-

{translate("modal.exportAccounts.complete.descOne")}

-

{translate("modal.exportAccounts.complete.descTwo")}

+

+ {translate("modal.exportAccounts.complete.descOne")} +

+

+ {translate("modal.exportAccounts.complete.descTwo")} +

+ diff --git a/packages/account-export/src/lib/components/ExportAccount.tsx b/packages/account-export/src/lib/components/ExportAccount.tsx index 19334527a..ca8d36cc7 100644 --- 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 = ({ onCloseModal={onCloseModal} onBack={showPassPhrase} onComplete={onTransferComplete} + onStartOver={onBack} /> )} diff --git a/packages/account-export/src/lib/styles.css b/packages/account-export/src/lib/styles.css index 42e111e32..2c86ad387 100644 --- a/packages/account-export/src/lib/styles.css +++ b/packages/account-export/src/lib/styles.css @@ -49,6 +49,14 @@ 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 { position: relative; display: flex; @@ -300,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/core/src/lib/locale/en.json b/packages/core/src/lib/locale/en.json index 5f8d91b21..0121a994e 100644 --- a/packages/core/src/lib/locale/en.json +++ b/packages/core/src/lib/locale/en.json @@ -100,6 +100,7 @@ "title": "Complete the Transfer", "descOne": "You will now be redirected to the wallet you selected to complete the transfer.", "descTwo": "Once import part of process is completed from selected wallet, press button to complete the transfer process.", + "startOverButton": "Start Over", "button": "Complete" } } From 0442f1a1c6ade9a45cfb8be08dd63d40785d9e1a Mon Sep 17 00:00:00 2001 From: Danny Cho Date: Wed, 14 Jun 2023 15:16:32 +1200 Subject: [PATCH 3/3] chore: Bump version to 8.1.4 --- package.json | 2 +- packages/account-export/package.json | 2 +- packages/coin98-wallet/package.json | 2 +- packages/core/package.json | 2 +- packages/default-wallets/package.json | 2 +- packages/finer-wallet/package.json | 2 +- packages/here-wallet/package.json | 2 +- packages/ledger/package.json | 2 +- packages/math-wallet/package.json | 2 +- packages/meteor-wallet/package.json | 2 +- packages/modal-ui-js/package.json | 2 +- packages/modal-ui/package.json | 2 +- packages/my-near-wallet/package.json | 2 +- packages/narwallets/package.json | 2 +- packages/near-snap/package.json | 2 +- packages/near-wallet/package.json | 2 +- packages/nearfi/package.json | 2 +- packages/neth/package.json | 2 +- packages/nightly-connect/package.json | 2 +- packages/nightly/package.json | 2 +- packages/opto-wallet/package.json | 2 +- packages/sender/package.json | 2 +- packages/wallet-connect/package.json | 2 +- packages/wallet-utils/package.json | 2 +- packages/welldone-wallet/package.json | 2 +- packages/xdefi/package.json | 2 +- 26 files changed, 26 insertions(+), 26 deletions(-) diff --git a/package.json b/package.json index 19b736a69..eb29275d4 100644 --- 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 index ee52de3b1..d7b239734 100644 --- 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/coin98-wallet/package.json b/packages/coin98-wallet/package.json index 27f0a4e13..44fad0136 100644 --- 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", diff --git a/packages/core/package.json b/packages/core/package.json index 505c5655f..67d932750 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@near-wallet-selector/core", - "version": "8.1.3", + "version": "8.1.4", "description": "This is the core package for NEAR Wallet Selector.", "keywords": [ "near", diff --git a/packages/default-wallets/package.json b/packages/default-wallets/package.json index 3d43761eb..3362b281c 100644 --- a/packages/default-wallets/package.json +++ b/packages/default-wallets/package.json @@ -1,6 +1,6 @@ { "name": "@near-wallet-selector/default-wallets", - "version": "8.1.3", + "version": "8.1.4", "description": "Default wallets package for NEAR Wallet Selector.", "keywords": [ "near", diff --git a/packages/finer-wallet/package.json b/packages/finer-wallet/package.json index d4167ba6d..202c158cd 100644 --- a/packages/finer-wallet/package.json +++ b/packages/finer-wallet/package.json @@ -1,6 +1,6 @@ { "name": "@near-wallet-selector/finer-wallet", - "version": "8.1.3", + "version": "8.1.4", "description": "FiNER Wallet package for NEAR Wallet Selector.", "keywords": [ "near", diff --git a/packages/here-wallet/package.json b/packages/here-wallet/package.json index b814220dc..d5eb3035d 100644 --- a/packages/here-wallet/package.json +++ b/packages/here-wallet/package.json @@ -1,6 +1,6 @@ { "name": "@near-wallet-selector/here-wallet", - "version": "8.1.3", + "version": "8.1.4", "description": "Here wallet package for NEAR Wallet Selector.", "keywords": [ "near", diff --git a/packages/ledger/package.json b/packages/ledger/package.json index 44d25eb15..164dc25a7 100644 --- a/packages/ledger/package.json +++ b/packages/ledger/package.json @@ -1,6 +1,6 @@ { "name": "@near-wallet-selector/ledger", - "version": "8.1.3", + "version": "8.1.4", "description": "Ledger package for NEAR Wallet Selector.", "keywords": [ "near", diff --git a/packages/math-wallet/package.json b/packages/math-wallet/package.json index 04a91e2b3..8ee0a7883 100644 --- a/packages/math-wallet/package.json +++ b/packages/math-wallet/package.json @@ -1,6 +1,6 @@ { "name": "@near-wallet-selector/math-wallet", - "version": "8.1.3", + "version": "8.1.4", "description": "Math wallet package for NEAR Wallet Selector.", "keywords": [ "near", diff --git a/packages/meteor-wallet/package.json b/packages/meteor-wallet/package.json index 125e5c324..5a5789d40 100644 --- a/packages/meteor-wallet/package.json +++ b/packages/meteor-wallet/package.json @@ -1,6 +1,6 @@ { "name": "@near-wallet-selector/meteor-wallet", - "version": "8.1.3", + "version": "8.1.4", "description": "Meteor wallet package for NEAR Wallet Selector.", "keywords": [ "near", diff --git a/packages/modal-ui-js/package.json b/packages/modal-ui-js/package.json index 3d4987a7c..20ad0e954 100644 --- a/packages/modal-ui-js/package.json +++ b/packages/modal-ui-js/package.json @@ -1,6 +1,6 @@ { "name": "@near-wallet-selector/modal-ui-js", - "version": "8.1.3", + "version": "8.1.4", "description": "Modal UI package for NEAR wallet Selector", "keywords": [ "near", diff --git a/packages/modal-ui/package.json b/packages/modal-ui/package.json index b1a8e1a2d..6140aa0de 100644 --- a/packages/modal-ui/package.json +++ b/packages/modal-ui/package.json @@ -1,6 +1,6 @@ { "name": "@near-wallet-selector/modal-ui", - "version": "8.1.3", + "version": "8.1.4", "description": "Modal UI package for NEAR wallet Selector", "keywords": [ "near", diff --git a/packages/my-near-wallet/package.json b/packages/my-near-wallet/package.json index 79777e4bf..b9e0ceaa8 100644 --- a/packages/my-near-wallet/package.json +++ b/packages/my-near-wallet/package.json @@ -1,6 +1,6 @@ { "name": "@near-wallet-selector/my-near-wallet", - "version": "8.1.3", + "version": "8.1.4", "description": "My Near Wallet package for NEAR Wallet Selector.", "keywords": [ "near", diff --git a/packages/narwallets/package.json b/packages/narwallets/package.json index 504f6fc4c..20dd0fac2 100644 --- a/packages/narwallets/package.json +++ b/packages/narwallets/package.json @@ -1,6 +1,6 @@ { "name": "@near-wallet-selector/narwallets", - "version": "8.1.3", + "version": "8.1.4", "description": "This is the Narwallets package for NEAR Wallet Selector.", "keywords": [ "near", diff --git a/packages/near-snap/package.json b/packages/near-snap/package.json index 0d6b13db8..36a27cb3f 100644 --- a/packages/near-snap/package.json +++ b/packages/near-snap/package.json @@ -1,6 +1,6 @@ { "name": "@near-wallet-selector/near-snap", - "version": "8.1.3", + "version": "8.1.4", "description": "Metamask snap to interact with Near dapps.", "keywords": [ "near", diff --git a/packages/near-wallet/package.json b/packages/near-wallet/package.json index 26f8ce921..4b7147151 100644 --- a/packages/near-wallet/package.json +++ b/packages/near-wallet/package.json @@ -1,6 +1,6 @@ { "name": "@near-wallet-selector/near-wallet", - "version": "8.1.3", + "version": "8.1.4", "description": "Near Wallet package for NEAR Wallet Selector.", "keywords": [ "near", diff --git a/packages/nearfi/package.json b/packages/nearfi/package.json index 19cd4f800..b60316264 100644 --- a/packages/nearfi/package.json +++ b/packages/nearfi/package.json @@ -1,6 +1,6 @@ { "name": "@near-wallet-selector/nearfi", - "version": "8.1.3", + "version": "8.1.4", "description": "Nearfi package for NEAR Wallet Selector.", "keywords": [ "near", diff --git a/packages/neth/package.json b/packages/neth/package.json index 370525b46..98202d776 100644 --- a/packages/neth/package.json +++ b/packages/neth/package.json @@ -1,6 +1,6 @@ { "name": "@near-wallet-selector/neth", - "version": "8.1.3", + "version": "8.1.4", "description": "Control NEAR accounts with ETH accounts", "author": "mattlockyer", "keywords": [ diff --git a/packages/nightly-connect/package.json b/packages/nightly-connect/package.json index d35515a1a..c4e3741e1 100644 --- a/packages/nightly-connect/package.json +++ b/packages/nightly-connect/package.json @@ -1,6 +1,6 @@ { "name": "@near-wallet-selector/nightly-connect", - "version": "8.1.3", + "version": "8.1.4", "description": "Nightly connect package for NEAR Wallet Selector.", "keywords": [ "near", diff --git a/packages/nightly/package.json b/packages/nightly/package.json index d00c1071f..f2ecbd612 100644 --- a/packages/nightly/package.json +++ b/packages/nightly/package.json @@ -1,6 +1,6 @@ { "name": "@near-wallet-selector/nightly", - "version": "8.1.3", + "version": "8.1.4", "description": "Nightly wallet package for NEAR Wallet Selector.", "keywords": [ "near", diff --git a/packages/opto-wallet/package.json b/packages/opto-wallet/package.json index 43a29b22e..e1891f4bc 100644 --- a/packages/opto-wallet/package.json +++ b/packages/opto-wallet/package.json @@ -1,6 +1,6 @@ { "name": "@near-wallet-selector/opto-wallet", - "version": "8.1.3", + "version": "8.1.4", "description": "Opto wallet package for NEAR Wallet Selector.", "keywords": [ "near", diff --git a/packages/sender/package.json b/packages/sender/package.json index a80b770a6..61d452f96 100644 --- a/packages/sender/package.json +++ b/packages/sender/package.json @@ -1,6 +1,6 @@ { "name": "@near-wallet-selector/sender", - "version": "8.1.3", + "version": "8.1.4", "description": "Sender wallet package for NEAR Wallet Selector.", "keywords": [ "near", diff --git a/packages/wallet-connect/package.json b/packages/wallet-connect/package.json index 8c9e5dc17..2c1aeb760 100644 --- a/packages/wallet-connect/package.json +++ b/packages/wallet-connect/package.json @@ -1,6 +1,6 @@ { "name": "@near-wallet-selector/wallet-connect", - "version": "8.1.3", + "version": "8.1.4", "description": "Wallet Connect package for NEAR Wallet Selector.", "keywords": [ "near", diff --git a/packages/wallet-utils/package.json b/packages/wallet-utils/package.json index f26082f40..565abf3a9 100644 --- a/packages/wallet-utils/package.json +++ b/packages/wallet-utils/package.json @@ -1,6 +1,6 @@ { "name": "@near-wallet-selector/wallet-utils", - "version": "8.1.3", + "version": "8.1.4", "description": "Wallet utils package for NEAR Wallet Selector.", "keywords": [ "near", diff --git a/packages/welldone-wallet/package.json b/packages/welldone-wallet/package.json index 6e09e5b6c..69be67793 100644 --- a/packages/welldone-wallet/package.json +++ b/packages/welldone-wallet/package.json @@ -1,6 +1,6 @@ { "name": "@near-wallet-selector/welldone-wallet", - "version": "8.1.3", + "version": "8.1.4", "description": "Welldone wallet package for NEAR Wallet Selector.", "keywords": [ "near", diff --git a/packages/xdefi/package.json b/packages/xdefi/package.json index 272c6b192..4b826e343 100644 --- a/packages/xdefi/package.json +++ b/packages/xdefi/package.json @@ -1,6 +1,6 @@ { "name": "@near-wallet-selector/xdefi", - "version": "8.1.3", + "version": "8.1.4", "description": "This is the XDEFI package for NEAR Wallet Selector.", "keywords": [ "near",