[wallet/mobile] fix: multisig account filter selector presentation #321

symbol · Oct 14, 2022 · 16dd670 · 16dd670
1 parent 61d5c79
commit 16dd670
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 36 deletions.
diff --git a/src/components/molecules/MultisigFilter.js b/src/components/molecules/MultisigFilter.js
@@ -1,43 +1,36 @@
-import React, { Component } from 'react';
-import { Dropdown } from '@src/components';
+import React from 'react';
+import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { shortifyAddress } from '@src/utils/format';
+import { Dropdown, Trunc } from '@src/components';
 import translate from '@src/locales/i18n';
 
-type Props = {
-    selected: string,
-    onSelect: (val: string) => {},
-};
+function MultisigFilter(props) {
+    const { cosignatoryOf, selectedAccountAddress, value, style, theme, onChange } = props;
 
-class MultisigFilter extends Component<Props> {
-    formatAddress = address => {
-        return address.substring(0, 6) + '...' + address.substring(address.length - 3, address.length);
-    };
-    render() {
-        const { cosignatoryOf, selectedAccountAddress, selected, onSelect, ...rest } = this.props;
-        const allMultisigAccounts = [
-            {
-                value: selectedAccountAddress,
-                label: translate('history.mainAccount'),
-            },
-            ...cosignatoryOf.map(address => ({
-                value: address,
-                label: shortifyAddress(address),
-            })),
-        ];
+    const list = [
+        {
+            value: selectedAccountAddress,
+            label: translate('unsortedKeys.currentAccount'),
+        },
+        ...cosignatoryOf.map(address => ({
+            value: address,
+            // notranslate
+            label: `Multisig (${Trunc({ type: 'address-short', children: address })})`,
+        })),
+    ];
 
-        return (
-            <Dropdown
-                list={allMultisigAccounts}
-                title={translate('history.accountFilter')}
-                value={this.formatAddress(selected)}
-                onChange={onSelect}
-                {...rest}
-            />
-        );
-    }
+    return (
+        <Dropdown list={list} title={translate('history.accountFilter')} value={value} style={style} theme={theme} onChange={onChange} />
+    );
 }
 
+MultisigFilter.propsTypes = {
+    value: PropTypes.string,
+    style: PropTypes.object,
+    theme: PropTypes.string,
+    onChange: PropTypes.func.isRequired,
+};
+
 export default connect(state => ({
     selectedAccountAddress: state.account.selectedAccountAddress,
     cosignatoryOf: state.account.cosignatoryOf,

diff --git a/src/locales/translations/en.json b/src/locales/translations/en.json
@@ -766,7 +766,8 @@
 		"announce_success": "Transaction announced successfully",
 		"noPublicKeyWarning": "Can't encrypt message: Address doesn't have a public key",
 		"nothingToShow": "Nothing to show",
-		"currentAccount": "You",
+		"you": "You",
+		"currentAccount": "Current Account",
 		"currentAddress": "Your address",
 		"alertNewVersionAppStoreTitle": "The new version of Symbol Wallet is available in the App Store",
 		"alertNewVersionAppStoreBody": "We strongly recommend that you update to the latest version!",

diff --git a/src/screens/History.js b/src/screens/History.js
@@ -140,8 +140,8 @@ class History extends Component {
                                 <MultisigFilter
                                     theme="light"
                                     style={styles.filterRight}
-                                    selected={addressFilter}
-                                    onSelect={v => this.onSelectMultisig(v)}
+                                    value={addressFilter}
+                                    onChange={v => this.onSelectMultisig(v)}
                                 />
                             )}
                         </Row>