From 7cf98ed1f49b6acfce1889a8f12d85ac1f2e27c4 Mon Sep 17 00:00:00 2001 From: Thiendekaco Date: Sat, 3 Feb 2024 18:57:34 +0700 Subject: [PATCH] update ui for Modal and notify for connect HD Wallets --- .github/workflows/sw-build.yml | 2 +- packages/core/src/constants.ts | 3 +- packages/core/src/i18n/en.json | 6 ++ .../account-center/AccountCenterPanel.svelte | 2 +- .../views/connect/ConnectHDWalletModal.svelte | 89 +++++++++++++++++++ .../src/views/connect/ConnectedWallet.svelte | 36 +++++++- packages/core/src/views/connect/Index.svelte | 20 ++++- packages/core/src/views/shared/Modal.svelte | 36 +++++++- .../src/views/shared/NetworkSelector.svelte | 2 + packages/demo/src/components/Layout.tsx | 2 +- packages/hw-common/src/account-select.ts | 8 ++ .../src/elements/AddressTable.svelte | 22 ++++- packages/hw-common/src/types.ts | 5 +- .../hw-common/src/views/AccountSelect.svelte | 81 +++++++++++++---- packages/keepkey/src/index.ts | 29 +++--- packages/keystone/src/index.ts | 13 +-- packages/ledgerPolkadot/src/index.ts | 13 ++- packages/trezor/src/index.ts | 17 ++-- 18 files changed, 319 insertions(+), 67 deletions(-) create mode 100644 packages/core/src/views/connect/ConnectHDWalletModal.svelte diff --git a/.github/workflows/sw-build.yml b/.github/workflows/sw-build.yml index 033da1036..84a28ded8 100644 --- a/.github/workflows/sw-build.yml +++ b/.github/workflows/sw-build.yml @@ -38,6 +38,6 @@ jobs: accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }} projectName: 'w3o' gitHubToken: ${{ secrets.GH_AUTOMATION_TOKEN }} - branch: ${{ github.event_name == 'pull_request' && format('pr-{0}', github.event.number) || github.ref_name }} + branch: 'master' directory: './packages/demo/build' wranglerVersion: '3' diff --git a/packages/core/src/constants.ts b/packages/core/src/constants.ts index 09c3f5631..55e6c0126 100644 --- a/packages/core/src/constants.ts +++ b/packages/core/src/constants.ts @@ -32,7 +32,8 @@ export const APP_INITIAL_STATE: AppState = { export const STORAGE_KEYS = { TERMS_AGREEMENT: 'onboard.js:agreement', - LAST_CONNECTED_WALLET: 'onboard.js:last_connected_wallet' + LAST_CONNECTED_WALLET: 'onboard.js:last_connected_wallet', + CONNECT_HD_WALLET_MODAL : 'onboard.js:connect_hd_wallet_modal' } export const MOBILE_WINDOW_WIDTH = 768 diff --git a/packages/core/src/i18n/en.json b/packages/core/src/i18n/en.json index 7d4a9672e..28a36eb7c 100644 --- a/packages/core/src/i18n/en.json +++ b/packages/core/src/i18n/en.json @@ -89,6 +89,12 @@ }, "sign": "Sign", "cancel": "Cancel" + }, + "confirmConnectHDWallet": { + "heading": "Connect your {wallet}", + "subHeading": "asdasdgasgduyasgdygaysgdyuagsydguyagd auysdgyausgdyagsydug", + "description": "All connected wallets will be disconnected immediately. If you want to disconnect some accounts, please go to the corresponding \nwallet app to disable.", + "confirm": "Confirm" } }, "accountCenter": { diff --git a/packages/core/src/views/account-center/AccountCenterPanel.svelte b/packages/core/src/views/account-center/AccountCenterPanel.svelte index 6d802114c..2b878a87a 100644 --- a/packages/core/src/views/account-center/AccountCenterPanel.svelte +++ b/packages/core/src/views/account-center/AccountCenterPanel.svelte @@ -376,7 +376,7 @@
- {#each $wallets$ as wallet, i (wallet.label, wallet.type)} + {#each $wallets$ as wallet, i (`${wallet.label}-${wallet.type}`)} + import { _ } from 'svelte-i18n' + import { Modal } from '../shared' + import en from '../../i18n/en.json' + import warningIcon from '../../icons/warning.js' + + export let wallet : string + export let onConfirm: () => void + + + + + {}} maskClose={true}> + + {$_('modals.confirmConnectHDWallet.heading', { + default: en.modals.confirmConnectHDWallet.heading, + values: { wallet } + })} + +
+ + {$_('modals.confirmConnectHDWallet.subHeading', { + default: en.modals.confirmConnectHDWallet.subHeading + })} + + + {$_('modals.confirmConnectHDWallet.description', { + default: en.modals.confirmConnectHDWallet.description + })} + +
+ +
+ +
+ diff --git a/packages/core/src/views/connect/ConnectedWallet.svelte b/packages/core/src/views/connect/ConnectedWallet.svelte index a480257c1..7f4bac822 100644 --- a/packages/core/src/views/connect/ConnectedWallet.svelte +++ b/packages/core/src/views/connect/ConnectedWallet.svelte @@ -6,12 +6,41 @@ import en from '../../i18n/en.json' import { shareReplay, startWith } from 'rxjs' import { state } from '../../store/index.js' + import ConnectHDWalletModal from './ConnectHDWalletModal.svelte'; + import { onMount } from 'svelte'; + import { getLocalStore, setLocalStore } from '../../utils.js'; + import { STORAGE_KEYS } from '../../constants.js'; + import {connectWallet$} from "../../streams"; export let selectedWallet: WalletState const appMetadata$ = state .select('appMetadata') .pipe(startWith(state.get().appMetadata), shareReplay(1)) + + let notifyAboutConnectHDWallet = false; + + onMount(()=>{ + + if(selectedWallet.label === 'Ledger' && selectedWallet.type === 'substrate'){ + const isShowedModal = JSON.parse( + getLocalStore(STORAGE_KEYS.CONNECT_HD_WALLET_MODAL) + ) + if(!isShowedModal){ + notifyAboutConnectHDWallet = true; + } + } + }) + const showNotifyConnectHDWalletModal = () => { + setLocalStore( + STORAGE_KEYS.CONNECT_HD_WALLET_MODAL, + JSON.stringify(notifyAboutConnectHDWallet) + ) + notifyAboutConnectHDWallet = false; + setTimeout(() => connectWallet$.next({ inProgress: false }), 1500) + } + + - +{#if notifyAboutConnectHDWallet} + showNotifyConnectHDWalletModal()} + /> +{/if}
diff --git a/packages/core/src/views/connect/Index.svelte b/packages/core/src/views/connect/Index.svelte index a46e7661d..77bd7aa05 100644 --- a/packages/core/src/views/connect/Index.svelte +++ b/packages/core/src/views/connect/Index.svelte @@ -262,9 +262,13 @@ // canceled previous request if (!address || address.length === 0) { - return + return; } + const addressFilter = address.filter((a) => { + return type === 'evm' ? a.toLowerCase().startsWith('0x') : !a.toLowerCase().startsWith('0x') + }) + // store last connected wallet if ( state.get().connect.autoConnectLastWallet || @@ -310,7 +314,7 @@ if (sdk) { try { sdk.subscribe({ - id: address[0], + id: addressFilter[0], chainId: chain, type: 'account' }) @@ -322,7 +326,7 @@ } const update: Pick = { - accounts: address.map((address) => + accounts: addressFilter.map((address) => ({ address, ens: null, uns: null, balance: null })), chains: [{ namespace: type, id: chain }], signer : signer @@ -439,8 +443,16 @@ }) ) } - setTimeout(() => connectWallet$.next({ inProgress: false }), 1500) + if(selectedWallet.label === 'Ledger' && selectedWallet.type === 'substrate'){ + const isShowedModal = JSON.parse( + getLocalStore(STORAGE_KEYS.CONNECT_HD_WALLET_MODAL) + ) + if(!isShowedModal){ + return; + } + } + setTimeout(() => connectWallet$.next({ inProgress: false }), 1500) } diff --git a/packages/core/src/views/shared/Modal.svelte b/packages/core/src/views/shared/Modal.svelte index 5b7243dfe..98e94f3dd 100644 --- a/packages/core/src/views/shared/Modal.svelte +++ b/packages/core/src/views/shared/Modal.svelte @@ -17,6 +17,7 @@ import { onDestroy, onMount } from 'svelte' import { configuration } from '../../configuration.js' import CloseButton from './CloseButton.svelte'; + import { MOBILE_WINDOW_WIDTH } from '../../constants.js'; const connectContainerEl = !!configuration.containerElements.connectModal @@ -37,6 +38,8 @@ export let close: () => void export let maskClose = false ; + let windowWidth: number + + + +
-
+
diff --git a/packages/core/src/views/shared/NetworkSelector.svelte b/packages/core/src/views/shared/NetworkSelector.svelte index 69343e503..14e7d22a9 100644 --- a/packages/core/src/views/shared/NetworkSelector.svelte +++ b/packages/core/src/views/shared/NetworkSelector.svelte @@ -32,6 +32,7 @@ resizeSelect() } + async function handleSelect() { const selectedChain = selectElement.selectedOptions[0].value @@ -122,6 +123,7 @@ class={`flex justify-center items-center pointer ${parentCSSId}`} bind:this={selectElement} value={wallet.chains[0].id} + disabled={ wallet.label === 'Ledger' && wallet.type === 'substrate' } on:change={handleSelect} style={` color: var(${colorVar}, diff --git a/packages/demo/src/components/Layout.tsx b/packages/demo/src/components/Layout.tsx index 236502892..203dbd51c 100644 --- a/packages/demo/src/components/Layout.tsx +++ b/packages/demo/src/components/Layout.tsx @@ -31,7 +31,7 @@ function Layout (): React.ReactElement { useEffect(() => { changeAccountCenter({ - position: 'topLeft', + position: 'bottomLeft', expanded: true, minimal: false }) diff --git a/packages/hw-common/src/account-select.ts b/packages/hw-common/src/account-select.ts index 0cf25a559..f01d57ff6 100644 --- a/packages/hw-common/src/account-select.ts +++ b/packages/hw-common/src/account-select.ts @@ -63,7 +63,15 @@ const mountAccountSelect = ( --gray-300: #999ca5; --gray-500: #33394b; --gray-700: #1a1d26; + --gray-800: #1A1A1A; --danger-500: #ff4f4f; + --success-100: #d1fae3; + --success-200: #baf7d5; + --success-300: #a4f4c6; + --success-400: #8df2b8; + --success-500: #4CEAAC; + --success-600: #18ce66; + --success-700: #129b4d; /* FONTS */ --font-family-normal: var(--w3o-font-family, Inter, sans-serif); diff --git a/packages/hw-common/src/elements/AddressTable.svelte b/packages/hw-common/src/elements/AddressTable.svelte index eb7da74d9..cef3fe104 100644 --- a/packages/hw-common/src/elements/AddressTable.svelte +++ b/packages/hw-common/src/elements/AddressTable.svelte @@ -3,15 +3,28 @@ import type { Account, AccountsList } from '../types.js' export let accountsListObject: AccountsList | undefined - export let accountSelected: Account | undefined = undefined + + export let handleAddAccount : ( length: number ) => void; + export let lengthAccountSelectedDefault : number + export let accountSelected: Account[] = [] export let showEmptyAddresses: boolean $: accounts = showEmptyAddresses ? accountsListObject && accountsListObject.all : accountsListObject && accountsListObject.filtered + $: accountsSelectedLength = lengthAccountSelectedDefault const handleSelectedRow = (accountClicked: Account) => { - accountSelected = accountClicked + const accountExits = accountSelected.findIndex( + ({ address }) => address === accountClicked.address); + if(accountExits >= 0){ + accountSelected.splice(accountExits, 1); + }else{ + accountSelected.push(accountClicked) + } + + accountsSelectedLength = accountSelected.length; + handleAddAccount(accountSelected.length) } @@ -121,8 +134,9 @@ {#each accounts as account} 0 && + !!accountSelected + .find(({ address }) => address === account.address ) } on:click={() => handleSelectedRow(account)} > Promise export type ScanAccountsOptions = { derivationPath: DerivationPath - chainId: Chain['id'] + chainId: Chain['id'], + accountIdxStart: number, asset: Asset } diff --git a/packages/hw-common/src/views/AccountSelect.svelte b/packages/hw-common/src/views/AccountSelect.svelte index 41e10dbef..67c535b05 100644 --- a/packages/hw-common/src/views/AccountSelect.svelte +++ b/packages/hw-common/src/views/AccountSelect.svelte @@ -26,16 +26,19 @@ } = selectAccountOptions let accountsListObject: AccountsList | undefined - let accountSelected: Account | undefined + let accountSelected: Account[] = [] let customDerivationPath = false let showEmptyAddresses = true let loadingAccounts = false let errorFromScan = '' + let accountIdxStart = 0 + $: accountSelectedLength = accountSelected.length let scanAccountOptions: ScanAccountsOptions = { derivationPath: (basePaths[0] && basePaths[0].value) || '', chainId: chains[0].id || '', - asset: assets[0] || null + asset: assets[0] || null, + accountIdxStart } const handleDerivationPathSelect = (e: Event) => { @@ -55,15 +58,18 @@ } const scanAccountsWrap = async (): Promise => { + console.log(scanAccountOptions, 'option') try { errorFromScan = '' loadingAccounts = true const allAccounts = await scanAccounts(scanAccountOptions) + const allAccountsFilter = allAccounts.filter(account => { + return parseFloat(weiToEth(account.balance.value.toString())) > 0 + }) accountsListObject = { - all: allAccounts, - filtered: allAccounts.filter(account => { - return parseFloat(weiToEth(account.balance.value.toString())) > 0 - }) + all: accountsListObject?.all.concat(allAccounts) || allAccounts, + filtered: accountsListObject?.filtered.concat(allAccountsFilter) + || allAccountsFilter } loadingAccounts = false } catch (err) { @@ -85,22 +91,31 @@ const connectAccounts = () => { if (!accountSelected) return - accounts$.next([accountSelected]) + accounts$.next(accountSelected) resetModal() } + const getMoreAccount = async () => { + scanAccountOptions.accountIdxStart += 10; + await scanAccountsWrap() + } + const dismiss = () => { accounts$.next([]) resetModal() } const resetModal = () => { - accountSelected = undefined + accountSelected = [] accountsListObject = undefined showEmptyAddresses = true scanAccountOptions.derivationPath = (basePaths[0] && basePaths[0].value) || '' } + + const handleAddAccount = ( length : number ) => { + accountSelectedLength = length; + }