From 53688e151a20d8cb5ea4a7659fc035c9487033d0 Mon Sep 17 00:00:00 2001 From: veado <61792675+veado@users.noreply.github.com> Date: Fri, 3 Jun 2022 19:22:28 +0200 Subject: [PATCH] [Settings] Filter accounts (#2282) --- CHANGELOG.md | 2 + .../AssetsFilter/AssetsFilter.styles.tsx | 2 - .../settings/WalletSettings.styles.ts | 31 +++- .../components/settings/WalletSettings.tsx | 149 +++++++++++------- .../uielements/input/Input.styles.ts | 1 + src/renderer/services/app/service.ts | 4 +- 6 files changed, 126 insertions(+), 63 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3d92e661c..4de2902cc 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,8 @@ - Add search option for pools [#2275](https://github.com/thorchain/asgardex-electron/pull/2275) [PoolsOverview] Watch / unwatch pools [#2276](https://github.com/thorchain/asgardex-electron/pull/2276) [PoolDetail] Watch / unwatch pool [#2278](https://github.com/thorchain/asgardex-electron/pull/2276) + [Settings] Make settings collapsable [#2281](https://github.com/thorchain/asgardex-electron/pull/2281) + [Settings] Filter acconts ## Update diff --git a/src/renderer/components/AssetsFilter/AssetsFilter.styles.tsx b/src/renderer/components/AssetsFilter/AssetsFilter.styles.tsx index a6c827267..18953f700 100644 --- a/src/renderer/components/AssetsFilter/AssetsFilter.styles.tsx +++ b/src/renderer/components/AssetsFilter/AssetsFilter.styles.tsx @@ -37,8 +37,6 @@ export const Input = styled(InputUI)` color: ${palette('gray', 1)}; } - transition: width 2s; - ${media.md` margin: 0 10px 0 10px; `} diff --git a/src/renderer/components/settings/WalletSettings.styles.ts b/src/renderer/components/settings/WalletSettings.styles.ts index 949bc8938..933edc7a5 100644 --- a/src/renderer/components/settings/WalletSettings.styles.ts +++ b/src/renderer/components/settings/WalletSettings.styles.ts @@ -12,6 +12,7 @@ import { ExternalLinkIcon as ExternalLinkIconUI, WalletTypeLabel as WalletTypeLabelUI } from '../uielements/common/Common.styles' +import { Input as InputUI } from '../uielements/input' import { Label as UILabel } from '../uielements/label' import * as CS from './Common.styles' @@ -27,9 +28,33 @@ export const TitleWrapper = styled.div` min-height: 70px; ` -export const Divider = styled(A.Divider)` - margin: 0; - border-top: 1px solid ${palette('gray', 0)}; +export const InputConainer = styled.div` + margin-top: 30px; + display: flex; + justify-content: center; + + ${media.md` + justify-content: start; + margin-left: 10px; + `} +` + +export const Input = styled(InputUI)` + border-color: ${palette('gray', 1)}; + max-width: 300px; + + .ant-input { + color: ${palette('text', 0)}; + } + + .ant-input-prefix svg, + .anticon-close-circle svg { + color: ${palette('gray', 1)}; + } + + ${media.md` + margin: 0 10px 0 10px; + `} ` export const Subtitle = styled(UILabel)` diff --git a/src/renderer/components/settings/WalletSettings.tsx b/src/renderer/components/settings/WalletSettings.tsx index c8acf9d12..aaa17ef60 100644 --- a/src/renderer/components/settings/WalletSettings.tsx +++ b/src/renderer/components/settings/WalletSettings.tsx @@ -1,5 +1,6 @@ import React, { useCallback, useMemo, useState } from 'react' +import { SearchOutlined } from '@ant-design/icons' import * as RD from '@devexperts/remote-data-ts' import { Address } from '@xchainjs/xchain-client' import { @@ -14,7 +15,8 @@ import { CosmosChain, Chain, DOGEChain, - TerraChain + TerraChain, + chainToString } from '@xchainjs/xchain-util' import { Col, List, Collapse, Row } from 'antd' import * as FP from 'fp-ts/function' @@ -41,6 +43,7 @@ import { isTerraChain, isThorChain } from '../../helpers/chainHelper' +import { emptyString } from '../../helpers/stringHelper' import { isEnabledWallet } from '../../helpers/walletHelper' import { ValidatePasswordHandler, WalletAccounts, WalletAddressAsync } from '../../services/wallet/types' import { walletTypeToI18n } from '../../services/wallet/util' @@ -226,11 +229,10 @@ export const WalletSettings: React.FC = (props): JSX.Element => { clickAddressLinkHandler(chain, address)} /> {isLedgerWallet(walletType) && ( - verifyLedgerAddressHandler(address, walletIndex)} /> - )} - - {isLedgerWallet(walletType) && ( - removeLedgerAddress(chain)} /> + <> + verifyLedgerAddressHandler(address, walletIndex)} /> + removeLedgerAddress(chain)} /> + )} @@ -284,63 +286,84 @@ export const WalletSettings: React.FC = (props): JSX.Element => { [intl, rejectLedgerAddress] ) - const renderAccounts = useMemo( + const [accountFilter, setAccountFilter] = useState(emptyString) + + const filterAccounts = useCallback(({ target }: React.ChangeEvent) => { + const value = target.value + setAccountFilter(value.toLowerCase()) + }, []) + + const oFilteredWalletAccounts = useMemo( () => FP.pipe( oWalletAccounts, - O.map((walletAccounts) => ( - - - {intl.formatMessage({ id: 'setting.account.management' })} - ( - - - - {chain} - - {/* supported Ledger */} - {FP.pipe( - accounts, - A.filter(({ type }) => isEnabledWallet(chain, network, type)), - A.mapWithIndex((index, account) => { - const { type } = account - return ( - - {walletTypeToI18n(type, intl)} - {renderAddress(chain, account)} - - ) - }) - )} - {/* unsupported Ledger */} - {FP.pipe( - accounts, - A.filter(({ type }) => !isEnabledWallet(chain, network, type)), - A.map((account) => { - const { type } = account - return ( - - {walletTypeToI18n(type, intl)} + O.map((walletAccounts) => + FP.pipe( + walletAccounts, + A.filter(({ chain }) => + accountFilter + ? chain.toLowerCase().startsWith(accountFilter) || + chainToString(chain).toLowerCase().startsWith(accountFilter) + : true + ) + ) + ) + ), + [accountFilter, oWalletAccounts] + ) - - - {intl.formatMessage({ id: 'common.notsupported.fornetwork' }, { network })} - - - ) - }) - )} - + const renderAccounts = useMemo( + () => + FP.pipe( + oFilteredWalletAccounts, + O.map((walletAccounts) => ( + ( + + + + {chain} + + {/* supported Ledger */} + {FP.pipe( + accounts, + A.filter(({ type }) => isEnabledWallet(chain, network, type)), + A.mapWithIndex((index, account) => { + const { type } = account + return ( + + {walletTypeToI18n(type, intl)} + {renderAddress(chain, account)} + + ) + }) )} - /> - - + {/* unsupported Ledger */} + {FP.pipe( + accounts, + A.filter(({ type }) => !isEnabledWallet(chain, network, type)), + A.map((account) => { + const { type } = account + return ( + + {walletTypeToI18n(type, intl)} + + + {intl.formatMessage({ id: 'common.notsupported.fornetwork' }, { network })} + + + ) + }) + )} + + )} + /> )), O.getOrElse(() => <>) ), - [oWalletAccounts, intl, renderAddress, network] + [oFilteredWalletAccounts, intl, renderAddress, network] ) return ( @@ -427,7 +450,21 @@ export const WalletSettings: React.FC = (props): JSX.Element => { - {renderAccounts} + + + {intl.formatMessage({ id: 'setting.account.management' })} + + } + onChange={filterAccounts} + allowClear + placeholder={intl.formatMessage({ id: 'common.search' }).toUpperCase()} + size="large" + /> + + {renderAccounts} + + diff --git a/src/renderer/components/uielements/input/Input.styles.ts b/src/renderer/components/uielements/input/Input.styles.ts index 6fd490b04..4c8d22a05 100644 --- a/src/renderer/components/uielements/input/Input.styles.ts +++ b/src/renderer/components/uielements/input/Input.styles.ts @@ -43,6 +43,7 @@ export type InputProps = CustomInputProps & AI.InputProps const inputStyle = css` height: ${({ size = 'middle' }) => sizes[size]}; + font-family: 'MainFontRegular'; font-size: ${({ size = 'middle' }) => fontSettings[size].size}; letter-spacing: ${({ size = 'middle' }) => fontSettings[size].spacing}; ${({ typevalue }) => typevalue === 'ghost' && 'border: none;'}; diff --git a/src/renderer/services/app/service.ts b/src/renderer/services/app/service.ts index 7e68795d7..beb3d1b0a 100644 --- a/src/renderer/services/app/service.ts +++ b/src/renderer/services/app/service.ts @@ -50,8 +50,8 @@ const { set: _setCollapsedSettings, get: getCollapsedSettings } = observableState({ - wallet: true, // collapsed === closed by default - app: true // collapsed === closed by default + wallet: false, // not collapsed === open by default + app: false // not collapsed === open by default }) const toggleCollapsedSetting: ToggleCollapsableSetting = (setting: SettingType) => {