diff --git a/packages/core/src/lib/constants.ts b/packages/core/src/lib/constants.ts index b7d204beb..b3ad210c8 100644 --- a/packages/core/src/lib/constants.ts +++ b/packages/core/src/lib/constants.ts @@ -1,5 +1,10 @@ export const PACKAGE_NAME = "near-wallet-selector"; export const RECENTLY_SIGNED_IN_WALLETS = "recentlySignedInWallets"; +export const REMEMBER_RECENT_WALLETS = "rememberRecentWallets"; +export const REMEMBER_RECENT_WALLETS_STATE = { + ENABLED: "enabled", + DISABLED: "disabled", +}; export const CONTRACT = "contract"; export const PENDING_CONTRACT = "contract:pending"; diff --git a/packages/core/src/lib/locale/ar.json b/packages/core/src/lib/locale/ar.json index d7223b8bc..aa5517da5 100644 --- a/packages/core/src/lib/locale/ar.json +++ b/packages/core/src/lib/locale/ar.json @@ -11,6 +11,7 @@ "useAWallet": "استخدم محفظة لتأمين وإدارة أصول نير الخاصة بك، وادخل لأي تطبيق يستخدم نير دون الحاجة إلى اسم المستخدم وكلمةالمرور", "connectionFailed": "اتصال فاشل", "connectionSuccessful": "اتصال ناجح", + "rememberWallet": "تذكر المحافظ", "connected": "متصل", "connectingTo": "جاري الاتصال ب", "connectingMessage": { diff --git a/packages/core/src/lib/locale/bg.json b/packages/core/src/lib/locale/bg.json index af5dfdd86..29775e92f 100644 --- a/packages/core/src/lib/locale/bg.json +++ b/packages/core/src/lib/locale/bg.json @@ -11,6 +11,7 @@ "useAWallet": "Използвайте портфейла, за да защитите и управлявате активите си на NEAR както и да използвате всяко приложение на NEAR без нужда от потребителски имена и пароли.", "connectionFailed": "Свързването неуспешно", "connectionSuccessful": "Свързването успешно", + "rememberWallet": "Запази портфейлите", "connected": "Свързан", "connectingTo": "Свързване към", "connectingMessage": { diff --git a/packages/core/src/lib/locale/en.json b/packages/core/src/lib/locale/en.json index 0121a994e..311e78f90 100644 --- a/packages/core/src/lib/locale/en.json +++ b/packages/core/src/lib/locale/en.json @@ -11,6 +11,7 @@ "useAWallet": "Use a wallet to secure and manage your NEAR assets, and to log in to any NEAR app without the need for usernames and passwords.", "connectionFailed": "Connection Failed", "connectionSuccessful": "Connection Successful", + "rememberWallet": "Remember wallets", "connected": "Connected", "connectingTo": "Connecting to", "connectingMessage": { diff --git a/packages/core/src/lib/locale/es.json b/packages/core/src/lib/locale/es.json index d78196203..61b4eec1c 100644 --- a/packages/core/src/lib/locale/es.json +++ b/packages/core/src/lib/locale/es.json @@ -11,6 +11,7 @@ "useAWallet": "Usa tu Billetera para resguardar y administrar tus activos en NEAR, e Iniciar sesión en cualquier aplicacion NEAR sin la necesidad de nombres de usuarios y contraseñas", "connectionFailed": "Conexión Fallida", "connectionSuccessful": "Conexión Existosa", + "rememberWallet": "Recordar las carteras", "connected": "Conectado", "connectingTo": "Conectando a ", "connectingMessage": { diff --git a/packages/core/src/lib/locale/hi.json b/packages/core/src/lib/locale/hi.json index c254f08ee..f487c5398 100644 --- a/packages/core/src/lib/locale/hi.json +++ b/packages/core/src/lib/locale/hi.json @@ -11,6 +11,7 @@ "useAWallet": "अपनी NEAR संपत्तियों को सुरक्षित और प्रबंधित करने के लिए वॉलेट का उपयोग करें और किसी भी NEAR ऐप (app) में लॉग इन करें, किसी उपयोगकर्ता (user) नाम और पासवर्ड की आवश्यकता नहीं है।", "connectionFailed": "कनेक्शन विफल|", "connectionSuccessful": "कनेक्शन सफल|", + "rememberWallet": "वॉलेटों को याद रखें", "connected": "वॉलेट जुड़ गया|", "connectingTo": "वॉलेट जुड़ रहा हे|", "connectingMessage": { diff --git a/packages/core/src/lib/locale/hr.json b/packages/core/src/lib/locale/hr.json index 75e5d0a8b..d50df7521 100644 --- a/packages/core/src/lib/locale/hr.json +++ b/packages/core/src/lib/locale/hr.json @@ -11,6 +11,7 @@ "useAWallet": "Koristite crypto novčanik da biste osigurali i upravljali svojom NEAR imovinom, te se prijavite u bilo koju NEAR aplikaciju bez korisničkog imena i lozinke.", "connectionFailed": "Neuspješno povezivanje.", "connectionSuccessful": "Uspješno povezivanje.", + "rememberWallet": "Zapamti novčanike", "connected": "Povezano.", "connectingTo": "Povezivanje u tijeku", "connectingMessage": { diff --git a/packages/core/src/lib/locale/ko.json b/packages/core/src/lib/locale/ko.json index 82d3d8516..d1d5f4c02 100644 --- a/packages/core/src/lib/locale/ko.json +++ b/packages/core/src/lib/locale/ko.json @@ -11,6 +11,7 @@ "useAWallet": "지갑을 사용하여 NEAR 자산을 보호·관리하고, 아이디와 비밀번호 없이 NEAR 앱에 로그인할 수 있습니다.", "connectionFailed": "연결 실패", "connectionSuccessful": "연결 성공", + "rememberWallet": "지갑들 기억하기", "connected": "Connected", "connectingTo": "연결 중: ", "connectingMessage": { diff --git a/packages/core/src/lib/locale/mk.json b/packages/core/src/lib/locale/mk.json index 59594e18a..8c846250a 100644 --- a/packages/core/src/lib/locale/mk.json +++ b/packages/core/src/lib/locale/mk.json @@ -11,6 +11,7 @@ "useAWallet": "Користете паричник за да ги заштитите и управувате вашите NEAR средства и да се најавите на која било NEAR апликација без потреба од кориснички имиња и лозинки.", "connectionFailed": "Поврзувањето не беше успешно.", "connectionSuccessful": "Успешно поврзување.", + "rememberWallet": "Запомни паричници", "connected": "Поврзано.", "connectingTo": "Поврзување со", "connectingMessage": { diff --git a/packages/core/src/lib/locale/sl.json b/packages/core/src/lib/locale/sl.json index 314c91629..48230a162 100644 --- a/packages/core/src/lib/locale/sl.json +++ b/packages/core/src/lib/locale/sl.json @@ -11,6 +11,7 @@ "useAWallet": "Uporabite denarnico, da bi zavarovali in upravljali s svoja NEAR digitalna sredstva, in se prijavite v katero koli aplikacijo ekosistema NEAR", "connectionFailed": "Povezava ni bila uspešna.", "connectionSuccessful": "Povezava je bila uspešna.", + "rememberWallet": "Zapomni si denarnice", "connected": "Vaša denarnica je povezana.", "connectingTo": "Povezovanje z", "connectingMessage": { diff --git a/packages/core/src/lib/locale/sr.json b/packages/core/src/lib/locale/sr.json index 71097b389..7172127b5 100644 --- a/packages/core/src/lib/locale/sr.json +++ b/packages/core/src/lib/locale/sr.json @@ -11,6 +11,7 @@ "useAWallet": "Користите новчаник да обезбедите и управљате својим NEAR средствима и да се пријавите у било коју апликацију NEAR без потребе за корисничким именима и лозинкама.", "connectionFailed": "Веза није успостављена.", "connectionSuccessful": "Веза је успела.", + "rememberWallet": "Запамти новчанике", "connected": "Повезан.", "connectingTo": "Повезивање на", "connectingMessage": { @@ -103,4 +104,4 @@ } } } -} +} \ No newline at end of file diff --git a/packages/core/src/lib/locale/vi.json b/packages/core/src/lib/locale/vi.json index 837ab1bf6..cc81436b4 100644 --- a/packages/core/src/lib/locale/vi.json +++ b/packages/core/src/lib/locale/vi.json @@ -11,6 +11,7 @@ "useAWallet": "Sử dụng ví để bảo mật và quản lý tài sản trên NEAR của bạn và đăng nhập vào bất kỳ ứng dụng NEAR nào, không cần tên người dùng và mật khẩu.", "connectionFailed": "Kết nối thất bại", "connectionSuccessful": "Kết nối thành công", + "rememberWallet": "Ghi nhớ lựa chọn ví", "connected": "Đã kết nối", "connectingTo": "Đang kết nối tới", "connectingMessage": { diff --git a/packages/core/src/lib/locale/zh.json b/packages/core/src/lib/locale/zh.json index 8321d7a70..09e4ab781 100644 --- a/packages/core/src/lib/locale/zh.json +++ b/packages/core/src/lib/locale/zh.json @@ -11,6 +11,7 @@ "useAWallet": "使用钱包来保护和管理你的 NEAR 资产，无需用户名和密码即可登录任何 NEAR 应用", "connectionFailed": "连接失败", "connectionSuccessful": "连接成功", + "rememberWallet": "记住钱包选择", "connected": "已连接", "connectingTo": "正在连接" }, diff --git a/packages/core/src/lib/services/wallet-modules/wallet-modules.service.ts b/packages/core/src/lib/services/wallet-modules/wallet-modules.service.ts index 61f37f585..f56e1ebd0 100644 --- a/packages/core/src/lib/services/wallet-modules/wallet-modules.service.ts +++ b/packages/core/src/lib/services/wallet-modules/wallet-modules.service.ts @@ -20,6 +20,8 @@ import { PACKAGE_NAME, PENDING_CONTRACT, PENDING_SELECTED_WALLET_ID, + REMEMBER_RECENT_WALLETS, + REMEMBER_RECENT_WALLETS_STATE, } from "../../constants"; import { JsonStorage } from "../storage/json-storage.service"; import type { ProviderService } from "../provider/provider.service.types"; @@ -81,6 +83,9 @@ export class WalletModules { const pendingContract = await jsonStorage.getItem( PENDING_CONTRACT ); + const rememberRecentWallets = await jsonStorage.getItem( + REMEMBER_RECENT_WALLETS + ); if (pendingSelectedWalletId && pendingContract) { const accounts = await this.validateWallet(pendingSelectedWalletId); @@ -99,14 +104,18 @@ export class WalletModules { }); } - const recentlySignedInWalletsFromPending = - await this.setWalletAsRecentlySignedIn(pendingSelectedWalletId); - + let recentlySignedInWalletsFromPending: Array = []; + if (rememberRecentWallets === REMEMBER_RECENT_WALLETS_STATE.ENABLED) { + recentlySignedInWalletsFromPending = + await this.setWalletAsRecentlySignedIn(pendingSelectedWalletId); + } return { accounts, contract: pendingContract, selectedWalletId: pendingSelectedWalletId, recentlySignedInWallets: recentlySignedInWalletsFromPending, + rememberRecentWallets: + rememberRecentWallets || REMEMBER_RECENT_WALLETS_STATE.ENABLED, }; } } @@ -124,6 +133,8 @@ export class WalletModules { contract: null, selectedWalletId: null, recentlySignedInWallets: recentlySignedInWallets || [], + rememberRecentWallets: + rememberRecentWallets || REMEMBER_RECENT_WALLETS_STATE.ENABLED, }; } @@ -132,6 +143,8 @@ export class WalletModules { contract, selectedWalletId, recentlySignedInWallets: recentlySignedInWallets || [], + rememberRecentWallets: + rememberRecentWallets || REMEMBER_RECENT_WALLETS_STATE.ENABLED, }; } @@ -174,7 +187,7 @@ export class WalletModules { walletId: string, { accounts, contractId, methodNames }: WalletEvents["signedIn"] ) { - const { selectedWalletId } = this.store.getState(); + const { selectedWalletId, rememberRecentWallets } = this.store.getState(); const jsonStorage = new JsonStorage(this.storage, PACKAGE_NAME); const contract = { contractId, methodNames }; @@ -194,13 +207,22 @@ export class WalletModules { await this.signOutWallet(selectedWalletId); } - const recentlySignedInWallets = await this.setWalletAsRecentlySignedIn( - walletId - ); + let recentlySignedInWallets: Array = []; + if (rememberRecentWallets === REMEMBER_RECENT_WALLETS_STATE.ENABLED) { + recentlySignedInWallets = await this.setWalletAsRecentlySignedIn( + walletId + ); + } this.store.dispatch({ type: "WALLET_CONNECTED", - payload: { walletId, contract, accounts, recentlySignedInWallets }, + payload: { + walletId, + contract, + accounts, + recentlySignedInWallets, + rememberRecentWallets, + }, }); this.emitter.emit("signedIn", { @@ -411,8 +433,13 @@ export class WalletModules { this.modules = modules; - const { accounts, contract, selectedWalletId, recentlySignedInWallets } = - await this.resolveStorageState(); + const { + accounts, + contract, + selectedWalletId, + recentlySignedInWallets, + rememberRecentWallets, + } = await this.resolveStorageState(); this.store.dispatch({ type: "SETUP_WALLET_MODULES", @@ -422,6 +449,7 @@ export class WalletModules { contract, selectedWalletId, recentlySignedInWallets, + rememberRecentWallets, }, }); diff --git a/packages/core/src/lib/store.ts b/packages/core/src/lib/store.ts index 48c22ee82..6019aea4f 100644 --- a/packages/core/src/lib/store.ts +++ b/packages/core/src/lib/store.ts @@ -12,6 +12,8 @@ import { CONTRACT, SELECTED_WALLET_ID, RECENTLY_SIGNED_IN_WALLETS, + REMEMBER_RECENT_WALLETS, + REMEMBER_RECENT_WALLETS_STATE, } from "./constants"; const reducer = ( @@ -28,6 +30,7 @@ const reducer = ( contract, selectedWalletId, recentlySignedInWallets, + rememberRecentWallets, } = action.payload; const accountStates = accounts.map((account, i) => { @@ -44,6 +47,7 @@ const reducer = ( contract, selectedWalletId, recentlySignedInWallets, + rememberRecentWallets, }; } case "WALLET_CONNECTED": { @@ -129,6 +133,33 @@ const reducer = ( accounts: accountStates, }; } + case "SET_REMEMBER_RECENT_WALLETS": { + const { selectedWalletId, recentlySignedInWallets } = state; + const { rememberRecentWallets } = action.payload; + const newRecentWallets = + rememberRecentWallets === REMEMBER_RECENT_WALLETS_STATE.ENABLED + ? REMEMBER_RECENT_WALLETS_STATE.DISABLED + : REMEMBER_RECENT_WALLETS_STATE.ENABLED; + + const newWalletsVal = [...recentlySignedInWallets]; + if ( + selectedWalletId && + !recentlySignedInWallets.includes(selectedWalletId) + ) { + newWalletsVal.push(selectedWalletId); + } + + const newRecentlySignedInWallets = + newRecentWallets === REMEMBER_RECENT_WALLETS_STATE.ENABLED + ? newWalletsVal + : []; + + return { + ...state, + rememberRecentWallets: newRecentWallets, + recentlySignedInWallets: newRecentlySignedInWallets, + }; + } default: return state; } @@ -143,6 +174,8 @@ export const createStore = async (storage: StorageService): Promise => { selectedWalletId: await jsonStorage.getItem(SELECTED_WALLET_ID), recentlySignedInWallets: (await jsonStorage.getItem(RECENTLY_SIGNED_IN_WALLETS)) || [], + rememberRecentWallets: + (await jsonStorage.getItem(REMEMBER_RECENT_WALLETS)) || "", }; const state$ = new BehaviorSubject(initialState); @@ -178,6 +211,12 @@ export const createStore = async (storage: StorageService): Promise => { RECENTLY_SIGNED_IN_WALLETS, "recentlySignedInWallets" ); + syncStorage( + prevState, + state, + REMEMBER_RECENT_WALLETS, + "rememberRecentWallets" + ); prevState = state; }); diff --git a/packages/core/src/lib/store.types.ts b/packages/core/src/lib/store.types.ts index a5696a146..76ee887c1 100644 --- a/packages/core/src/lib/store.types.ts +++ b/packages/core/src/lib/store.types.ts @@ -61,6 +61,10 @@ export interface WalletSelectorState { * Returns ID-s of 5 recently signed in wallets. */ recentlySignedInWallets: Array; + /** + * Returns a string, which indicates if the functionality about recentlySignedInWallets is active. + */ + rememberRecentWallets: string; } export type WalletSelectorAction = @@ -72,6 +76,7 @@ export type WalletSelectorAction = contract: ContractState | null; selectedWalletId: string | null; recentlySignedInWallets: Array; + rememberRecentWallets: string; }; } | { @@ -81,6 +86,7 @@ export type WalletSelectorAction = contract: ContractState; accounts: Array; recentlySignedInWallets: Array; + rememberRecentWallets: string; }; } | { @@ -101,6 +107,12 @@ export type WalletSelectorAction = payload: { accountId: string; }; + } + | { + type: "SET_REMEMBER_RECENT_WALLETS"; + payload: { + rememberRecentWallets: string; + }; }; export interface ReadOnlyStore { diff --git a/packages/core/src/lib/wallet-selector.ts b/packages/core/src/lib/wallet-selector.ts index 0ea7a36d1..76123bfbe 100644 --- a/packages/core/src/lib/wallet-selector.ts +++ b/packages/core/src/lib/wallet-selector.ts @@ -49,6 +49,14 @@ const createSelector = ( payload: { accountId }, }); }, + setRememberRecentWallets: () => { + const { rememberRecentWallets } = store.getState(); + + store.dispatch({ + type: "SET_REMEMBER_RECENT_WALLETS", + payload: { rememberRecentWallets }, + }); + }, isSignedIn() { const { accounts } = store.getState(); diff --git a/packages/core/src/lib/wallet-selector.types.ts b/packages/core/src/lib/wallet-selector.types.ts index a50079c14..ff636fb8a 100644 --- a/packages/core/src/lib/wallet-selector.types.ts +++ b/packages/core/src/lib/wallet-selector.types.ts @@ -94,6 +94,11 @@ export interface WalletSelector { */ setActiveAccount(accountId: string): void; + /** + * Programmatically changes the rememberRecentWallets behavior, it can deactivate and activate rememberRecentWallets. + */ + setRememberRecentWallets(): void; + /** * Attach an event handler to important events. */ diff --git a/packages/modal-ui-js/src/lib/render-modal.ts b/packages/modal-ui-js/src/lib/render-modal.ts index f33968ee4..7fb822215 100644 --- a/packages/modal-ui-js/src/lib/render-modal.ts +++ b/packages/modal-ui-js/src/lib/render-modal.ts @@ -22,6 +22,8 @@ export type HardwareWalletAccountState = HardwareWalletAccount & { }; let initialRender = true; +let isChecked = false; + const getAccountIds = async (publicKey: string): Promise> => { if (!modalState) { return []; @@ -237,12 +239,92 @@ function renderOptionsList( }); } } +const renderWalletOptions = () => { + if (!modalState) { + return; + } + + const moreWallets: Array> = []; + const recentlySignedInWallets: Array> = []; + + modalState.modules.forEach((module) => { + if ( + modalState?.selector.store + .getState() + .recentlySignedInWallets.includes(module.id) + ) { + recentlySignedInWallets.push(module); + } else { + moreWallets.push(module); + } + }); + + const optionsWrapper = document.querySelector(".wallet-options-wrapper"); + if (optionsWrapper) { + optionsWrapper.innerHTML = ""; + } + + if ( + modalState.selector.options.optimizeWalletOrder && + recentlySignedInWallets.length > 0 + ) { + optionsWrapper?.insertAdjacentHTML( + "beforeend", + ` +
+
Recent
+
+
+ ` + ); + optionsWrapper?.insertAdjacentHTML( + "beforeend", + ` +
+
More
+
+
+ ` + ); + renderOptionsList(".recent-options-list-content", recentlySignedInWallets); + + if (modalState.selector.options.randomizeWalletOrder) { + renderOptionsList( + ".more-options-list-content", + moreWallets.sort(() => Math.random() - 0.5) + ); + } else { + renderOptionsList(".more-options-list-content", moreWallets); + } + } else { + optionsWrapper?.insertAdjacentHTML( + "beforeend", + `
` + ); + renderOptionsList(".options-list", modalState.modules); + } +}; + +const handleSwitchChange = () => { + if (!modalState) { + return; + } + + isChecked = !isChecked; + modalState.selector.setRememberRecentWallets(); + + renderWalletOptions(); +}; export function renderModal() { if (!modalState) { return; } + const { rememberRecentWallets, selectedWalletId } = + modalState.selector.store.getState(); + isChecked = rememberRecentWallets === "enabled"; + modalState.container.innerHTML = `

${translate("modal.wallet.connectYourWallet")}

+ + ${translate("modal.wallet.rememberWallet")} + +
@@ -262,6 +353,10 @@ export function renderModal() {
`; + document + .getElementById("rememberWalletSwitch") + ?.addEventListener("change", handleSwitchChange); + const moreWallets: Array> = []; const recentlySignedInWallets: Array> = []; @@ -309,6 +404,13 @@ export function renderModal() { } else { renderOptionsList(".more-options-list-content", moreWallets); } + + if (!selectedWalletId && recentlySignedInWallets.length > 0) { + const firstWallet = recentlySignedInWallets[0]; + document + .querySelector(`#module-${firstWallet.id}`) + ?.classList.add("selected-wallet"); + } } else { document .querySelector(".wallet-options-wrapper") diff --git a/packages/modal-ui-js/src/lib/styles.css b/packages/modal-ui-js/src/lib/styles.css index 6d5ffeba1..402d22a4f 100644 --- a/packages/modal-ui-js/src/lib/styles.css +++ b/packages/modal-ui-js/src/lib/styles.css @@ -191,6 +191,17 @@ color: var(--wallet-selector-heading-color, var(--heading-color)); } +.nws-modal-wrapper .nws-modal .modal-left .modal-left-title { + position: fixed; + width: 34%; + top: 0; + left: 0; + right: 0; + z-index: 10; + background: var(--content-bg); + padding: 32px 24px 0px 24px; +} + .nws-modal-wrapper .nws-modal .modal-left::-webkit-scrollbar { width: 10px; } @@ -201,6 +212,7 @@ .nws-modal-wrapper .nws-modal .wallet-options-wrapper { margin-bottom: 20px; + margin-top: 100px } .nws-modal-wrapper .nws-modal .wallet-options-wrapper .description { @@ -1297,6 +1309,70 @@ padding: 8px 24px; } +.nws-switch { + position: relative; + display: inline-block; + vertical-align: middle; + width: 34px; + height: 20px; + margin-left: 12px; +} + +.nws-switch input { + opacity: 0; + width: 0; + height: 0; +} + +.nws-slider { + position: absolute; + cursor: pointer; + inset: 0; + background-color: var(--gray); + -webkit-transition: .4s; + transition: .4s; +} + +.nws-slider:before { + position: absolute; + content: ""; + height: 16px; + width: 16px; + top: 50%; + transform: translate(3px, -50%); + background-color: var(--heading-color); + -webkit-transition: .4s; + transition: .4s; +} + +input:checked + .nws-slider { + background-color: var(--selected-wallet-bg); +} + +input:focus + .nws-slider { + box-shadow: 0 0 1px var(--selected-wallet-bg); +} + +input:checked + .nws-slider:before { + -webkit-transform: translate(calc(100% - 1px), -50%); + -ms-transform: translate(calc(100% - 1px), -50%); + transform: translate(calc(100% - 1px), -50%); +} + +.nws-slider.round { + border-radius: 34px; +} + +.nws-slider.round:before { + border-radius: 50%; +} + +.nws-remember-wallet { + margin-top: 10px; + font-size: 16px; + color: var(--wallet-selector-text-color, var(--text-color)); +} + /************* Responsive and mobile **********/ @media (min-width: 577px) { @@ -1314,6 +1390,11 @@ } } +@media (max-width: 810px) { + .nws-modal-wrapper .nws-modal .wallet-options-wrapper { + margin-top: 90px + } +} @media (max-width: 768px) { @@ -1349,6 +1430,11 @@ margin-top: 30px; margin-bottom: 35px; } + + .nws-modal-wrapper .nws-modal .modal-left .modal-left-title { + width: 39%; + padding: 32px 16px 0px 16px; + } } @@ -1362,8 +1448,15 @@ margin-top: 20px; } - .nws-modal-wrapper .nws-modal .modal-left .modal-left-title h2 { - text-align: center; + .nws-modal-wrapper .nws-modal .modal-left .modal-left-title { + position: relative; + width: 100%; + padding: 0px; + z-index: 0; + } + + .options-list .recent-options-list-content { + margin-top: 100px; } .nws-modal-wrapper .wallet-not-installed-wrapper > p { diff --git a/packages/modal-ui/src/lib/components/Modal.tsx b/packages/modal-ui/src/lib/components/Modal.tsx index afcce63da..530b4c0ff 100644 --- a/packages/modal-ui/src/lib/components/Modal.tsx +++ b/packages/modal-ui/src/lib/components/Modal.tsx @@ -57,6 +57,16 @@ export const Modal: React.FC = ({ const [selectedWallet, setSelectedWallet] = useState(); const [bridgeWalletUri, setBridgeWalletUri] = useState(); + const { rememberRecentWallets } = selector.store.getState(); + const [isChecked, setIsChecked] = useState( + rememberRecentWallets === "enabled" + ); + + const handleSwitchChange = () => { + setIsChecked((prevIsChecked) => !prevIsChecked); + selector.setRememberRecentWallets(); + }; + useEffect(() => { setRoute({ name: "WalletHome", @@ -261,6 +271,17 @@ export const Modal: React.FC = ({

{translate("modal.wallet.connectYourWallet")}

+ + {translate("modal.wallet.rememberWallet")} + +
{ diff --git a/packages/modal-ui/src/lib/components/WalletOptions.tsx b/packages/modal-ui/src/lib/components/WalletOptions.tsx index 971ff7667..4699129d2 100644 --- a/packages/modal-ui/src/lib/components/WalletOptions.tsx +++ b/packages/modal-ui/src/lib/components/WalletOptions.tsx @@ -77,6 +77,13 @@ export const WalletOptions: React.FC = ({ // eslint-disable-next-line react-hooks/exhaustive-deps }, []); + useEffect(() => { + const { recentlySignedInWallets } = selector.store.getState(); + if (recentlySignedInWallets.length) { + setActiveWalletId(recentlySignedInWallets[0]); + } + }, [selector.store]); + function renderOptionsList(modulesToRender: Array>) { return modulesToRender.reduce>( (result, module, index) => { diff --git a/packages/modal-ui/src/lib/components/styles.css b/packages/modal-ui/src/lib/components/styles.css index edd9f9aad..d00d4d490 100644 --- a/packages/modal-ui/src/lib/components/styles.css +++ b/packages/modal-ui/src/lib/components/styles.css @@ -191,6 +191,17 @@ color: var(--wallet-selector-heading-color, var(--heading-color)); } +.nws-modal-wrapper .nws-modal .modal-left .modal-left-title { + position: fixed; + width: 34%; + top: 0; + left: 0; + right: 0; + z-index: 10; + background: var(--content-bg); + padding: 32px 24px 0px 24px; +} + .nws-modal-wrapper .nws-modal .modal-left::-webkit-scrollbar { width: 10px; } @@ -201,6 +212,7 @@ .nws-modal-wrapper .nws-modal .wallet-options-wrapper { margin-bottom: 20px; + margin-top: 100px } .nws-modal-wrapper .nws-modal .wallet-options-wrapper .description { @@ -1298,6 +1310,70 @@ padding: 8px 24px; } +.nws-switch { + position: relative; + display: inline-block; + vertical-align: middle; + width: 34px; + height: 20px; + margin-left: 12px; +} + +.nws-switch input { + opacity: 0; + width: 0; + height: 0; +} + +.nws-slider { + position: absolute; + cursor: pointer; + inset: 0; + background-color: var(--gray); + -webkit-transition: .4s; + transition: .4s; +} + +.nws-slider:before { + position: absolute; + content: ""; + height: 16px; + width: 16px; + top: 50%; + transform: translate(3px, -50%); + background-color: var(--heading-color); + -webkit-transition: .4s; + transition: .4s; +} + +input:checked + .nws-slider { + background-color: var(--selected-wallet-bg); +} + +input:focus + .nws-slider { + box-shadow: 0 0 1px var(--selected-wallet-bg); +} + +input:checked + .nws-slider:before { + -webkit-transform: translate(calc(100% - 1px), -50%); + -ms-transform: translate(calc(100% - 1px), -50%); + transform: translate(calc(100% - 1px), -50%); +} + +.nws-slider.round { + border-radius: 34px; +} + +.nws-slider.round:before { + border-radius: 50%; +} + +.nws-remember-wallet { + margin-top: 10px; + font-size: 16px; + color: var(--wallet-selector-text-color, var(--text-color)); +} + /************* Responsive and mobile **********/ @media (min-width: 577px) { @@ -1315,6 +1391,11 @@ } } +@media (max-width: 810px) { + .nws-modal-wrapper .nws-modal .wallet-options-wrapper { + margin-top: 90px + } +} @media (max-width: 768px) { @@ -1350,6 +1431,11 @@ margin-top: 30px; margin-bottom: 35px; } + + .nws-modal-wrapper .nws-modal .modal-left .modal-left-title { + width: 39%; + padding: 32px 16px 0px 16px; + } } @@ -1363,8 +1449,10 @@ margin-top: 20px; } - .nws-modal-wrapper .nws-modal .modal-left .modal-left-title h2 { - text-align: center; + .nws-modal-wrapper .nws-modal .modal-left .modal-left-title { + width: 100%; + padding: 32px 12px 0px 12px; + z-index: 0; } .nws-modal-wrapper .wallet-not-installed-wrapper > p {