[Settings] Filter accounts (#2282)

thorchain · Jun 3, 2022 · 53688e1 · 53688e1
1 parent ebbe696
commit 53688e1
Show file tree

Hide file tree

Showing 6 changed files with 126 additions and 63 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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> = (props): JSX.Element => {
                     <Styled.AddressLinkIcon onClick={() => clickAddressLinkHandler(chain, address)} />
 
                     {isLedgerWallet(walletType) && (
-                      <Styled.EyeOutlined onClick={() => verifyLedgerAddressHandler(address, walletIndex)} />
-                    )}
-
-                    {isLedgerWallet(walletType) && (
-                      <Styled.RemoveLedgerIcon onClick={() => removeLedgerAddress(chain)} />
+                      <>
+                        <Styled.EyeOutlined onClick={() => verifyLedgerAddressHandler(address, walletIndex)} />
+                        <Styled.RemoveLedgerIcon onClick={() => removeLedgerAddress(chain)} />
+                      </>
                     )}
                   </Styled.AddressWrapper>
                 </>
@@ -284,63 +286,84 @@ export const WalletSettings: React.FC<Props> = (props): JSX.Element => {
     [intl, rejectLedgerAddress]
   )
 
-  const renderAccounts = useMemo(
+  const [accountFilter, setAccountFilter] = useState(emptyString)
+
+  const filterAccounts = useCallback(({ target }: React.ChangeEvent<HTMLInputElement>) => {
+    const value = target.value
+    setAccountFilter(value.toLowerCase())
+  }, [])
+
+  const oFilteredWalletAccounts = useMemo(
     () =>
       FP.pipe(
         oWalletAccounts,
-        O.map((walletAccounts) => (
-          <Col key={'accounts'} span={24}>
-            <Styled.AccountCard>
-              <Styled.Subtitle>{intl.formatMessage({ id: 'setting.account.management' })}</Styled.Subtitle>
-              <List
-                dataSource={walletAccounts}
-                renderItem={({ chain, accounts }, i: number) => (
-                  <Styled.ListItem key={i}>
-                    <Styled.AccountTitleWrapper>
-                      <AssetIcon asset={getChainAsset(chain)} size={'small'} network="mainnet" />
-                      <Styled.AccountTitle>{chain}</Styled.AccountTitle>
-                    </Styled.AccountTitleWrapper>
-                    {/* supported Ledger */}
-                    {FP.pipe(
-                      accounts,
-                      A.filter(({ type }) => isEnabledWallet(chain, network, type)),
-                      A.mapWithIndex((index, account) => {
-                        const { type } = account
-                        return (
-                          <Styled.AccountAddressWrapper key={type}>
-                            <Styled.WalletTypeLabel>{walletTypeToI18n(type, intl)}</Styled.WalletTypeLabel>
-                            <Styled.AccountContent key={index}>{renderAddress(chain, account)}</Styled.AccountContent>
-                          </Styled.AccountAddressWrapper>
-                        )
-                      })
-                    )}
-                    {/* unsupported Ledger */}
-                    {FP.pipe(
-                      accounts,
-                      A.filter(({ type }) => !isEnabledWallet(chain, network, type)),
-                      A.map((account) => {
-                        const { type } = account
-                        return (
-                          <Styled.AccountAddressWrapper key={type}>
-                            <Styled.WalletTypeLabel>{walletTypeToI18n(type, intl)}</Styled.WalletTypeLabel>
+        O.map((walletAccounts) =>
+          FP.pipe(
+            walletAccounts,
+            A.filter(({ chain }) =>
+              accountFilter
+                ? chain.toLowerCase().startsWith(accountFilter) ||
+                  chainToString(chain).toLowerCase().startsWith(accountFilter)
+                : true
+            )
+          )
+        )
+      ),
+    [accountFilter, oWalletAccounts]
+  )
 
-                            <Styled.NotSupportedWrapper>
-                              <Styled.Icon component={AttentionIcon} />
-                              {intl.formatMessage({ id: 'common.notsupported.fornetwork' }, { network })}
-                            </Styled.NotSupportedWrapper>
-                          </Styled.AccountAddressWrapper>
-                        )
-                      })
-                    )}
-                  </Styled.ListItem>
+  const renderAccounts = useMemo(
+    () =>
+      FP.pipe(
+        oFilteredWalletAccounts,
+        O.map((walletAccounts) => (
+          <List
+            key="accounts"
+            dataSource={walletAccounts}
+            renderItem={({ chain, accounts }, i: number) => (
+              <Styled.ListItem key={i}>
+                <Styled.AccountTitleWrapper>
+                  <AssetIcon asset={getChainAsset(chain)} size={'small'} network="mainnet" />
+                  <Styled.AccountTitle>{chain}</Styled.AccountTitle>
+                </Styled.AccountTitleWrapper>
+                {/* supported Ledger */}
+                {FP.pipe(
+                  accounts,
+                  A.filter(({ type }) => isEnabledWallet(chain, network, type)),
+                  A.mapWithIndex((index, account) => {
+                    const { type } = account
+                    return (
+                      <Styled.AccountAddressWrapper key={type}>
+                        <Styled.WalletTypeLabel>{walletTypeToI18n(type, intl)}</Styled.WalletTypeLabel>
+                        <Styled.AccountContent key={index}>{renderAddress(chain, account)}</Styled.AccountContent>
+                      </Styled.AccountAddressWrapper>
+                    )
+                  })
                 )}
-              />
-            </Styled.AccountCard>
-          </Col>
+                {/* unsupported Ledger */}
+                {FP.pipe(
+                  accounts,
+                  A.filter(({ type }) => !isEnabledWallet(chain, network, type)),
+                  A.map((account) => {
+                    const { type } = account
+                    return (
+                      <Styled.AccountAddressWrapper key={type}>
+                        <Styled.WalletTypeLabel>{walletTypeToI18n(type, intl)}</Styled.WalletTypeLabel>
+                        <Styled.NotSupportedWrapper>
+                          <Styled.Icon component={AttentionIcon} />
+                          {intl.formatMessage({ id: 'common.notsupported.fornetwork' }, { network })}
+                        </Styled.NotSupportedWrapper>
+                      </Styled.AccountAddressWrapper>
+                    )
+                  })
+                )}
+              </Styled.ListItem>
+            )}
+          />
         )),
         O.getOrElse(() => <></>)
       ),
-    [oWalletAccounts, intl, renderAddress, network]
+    [oFilteredWalletAccounts, intl, renderAddress, network]
   )
 
   return (
@@ -427,7 +450,21 @@ export const WalletSettings: React.FC<Props> = (props): JSX.Element => {
               </Row>
             </Styled.Card>
           </Styled.CardContainer>
-          {renderAccounts}
+          <Col key={'accounts'} span={24}>
+            <Styled.AccountCard>
+              <Styled.Subtitle>{intl.formatMessage({ id: 'setting.account.management' })}</Styled.Subtitle>
+              <Styled.InputConainer>
+                <Styled.Input
+                  prefix={<SearchOutlined />}
+                  onChange={filterAccounts}
+                  allowClear
+                  placeholder={intl.formatMessage({ id: 'common.search' }).toUpperCase()}
+                  size="large"
+                />
+              </Styled.InputConainer>
+              {renderAccounts}
+            </Styled.AccountCard>
+          </Col>
         </Collapse.Panel>
       </CStyled.Collapse>
     </Styled.Container>

diff --git 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<InputProps>`
   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
@@ -50,8 +50,8 @@ const {
   set: _setCollapsedSettings,
   get: getCollapsedSettings
 } = observableState<CollapsableSettings>({
-  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) => {