Merge pull request #284 from paritytech/tbaut-refactor-updateNewAccount

Refactor updateNewAccount

package.json

@@ -21,7 +21,6 @@
   "dependencies": {
     "@react-native-community/netinfo": "^4.1.1",
     "bignumber.js": "^4.0.0",
-    "debounce": "^1.0.0",
     "hoist-non-react-statics": "^2.5.0",
     "lodash": "^4.17.15",
     "prop-types": "^15.6.1",

src/components/AccountIconChooser.js

@@ -56,11 +56,12 @@ export default class AccountIconChooser extends React.PureComponent<{
           .split(' ')
           .map(async () => {
             const seed = await words();
-            const { address } = await brainWalletAddress(seed);
+            const { address, bip39 } = await brainWalletAddress(seed);
 
             return {
+              address,
+              bip39,
               seed,
-              address
             };
           })
       );
@@ -74,8 +75,9 @@ export default class AccountIconChooser extends React.PureComponent<{
   };
 
   renderIcon = ({ item, index }) => {
-    const { value, onChange } = this.props;
-    const iSelected = item.address.toLowerCase() === value.toLowerCase();
+    const { value, onSelect } = this.props;
+    const { address, bip39, seed } = item;
+    const iSelected = address.toLowerCase() === value.toLowerCase();
     const style = [styles.icon];
 
     return (
@@ -83,13 +85,14 @@ export default class AccountIconChooser extends React.PureComponent<{
         key={index}
         style={[styles.iconBorder, iSelected ? styles.selected : {}]}
         onPress={() =>
-          onChange({
-            address: item.address,
-            seed: item.seed
+          onSelect({
+            address,
+            bip39,
+            seed
           })
         }
       >
-        <AccountIcon style={style} seed={'0x' + item.address} />
+        <AccountIcon style={style} seed={'0x' + address} />
       </TouchableOpacity>
     );
   }

src/screens/AccountNew.js

@@ -73,8 +73,8 @@ class AccountNewView extends React.Component {
               </Text>
               <AccountIconChooser
                 value={selected && selected.seed && selected.address}
-                onChange={({ address, seed }) => {
-                  accounts.updateNew({ address, seed });
+                onSelect={({ address, bip39, seed }) => {
+                  accounts.updateNew({ address, seed, validBip39Seed: bip39 });
                 }}
               />
               <Text style={styles.title}>ACCOUNT NAME</Text>

src/screens/AccountRecover.js

@@ -26,11 +26,13 @@ import AccountCard from '../components/AccountCard';
 import AccountSeed from '../components/AccountSeed';
 import Background from '../components/Background';
 import Button from '../components/Button';
+import NetworkButton from '../components/NetworkButton';
 import TextInput from '../components/TextInput';
 import { NETWORK_LIST } from '../constants';
 import AccountsStore from '../stores/AccountsStore';
 import { validateSeed } from '../util/account';
-import NetworkButton from '../components/NetworkButton';
+import { debounce } from '../util/debounce'
+import { brainWalletAddress } from '../util/native';
 
 export default class AccountRecover extends React.Component {
   static navigationOptions = {
@@ -50,8 +52,20 @@ export default class AccountRecover extends React.Component {
 class AccountRecoverView extends React.Component {
   constructor(...args) {
     super(...args);
+
+    this.state = { seed: ''}
+  }
+
+  addressGeneration = (seed) => {
+    const { accounts } = this.props;
+    
+    brainWalletAddress(seed)
+    .then(({ address, bip39 }) => accounts.updateNew({address, seed, validBip39Seed: bip39}))
+    .catch(console.error);
   }
 
+  debouncedAddressGeneration = debounce(this.addressGeneration, 200)
+  
   componentWillUnmount = function () {
     // called when the user goes back, or finishes the whole recovery process
     this.props.accounts.updateNew({seed : ''});
@@ -92,8 +106,11 @@ class AccountRecoverView extends React.Component {
             </Text>
             <AccountSeed
               valid={validateSeed(selected.seed, selected.validBip39Seed).valid}
-              onChangeText={seed => accounts.updateNew({ seed })}
-              value={selected.seed}
+              onChangeText={seed => {
+                this.debouncedAddressGeneration(seed);
+                this.setState({seed});
+              }}
+              value={this.state.seed}
             />
             <AccountCard
               style={{ marginTop: 20 }}
@@ -107,6 +124,7 @@ class AccountRecoverView extends React.Component {
               title="Next Step"
               onPress={() => {
                 const validation = validateSeed(selected.seed, selected.validBip39Seed);
+
                 if (!validation.valid) {
                   if (validation.accountRecoveryAllowed){
                     return Alert.alert(
@@ -144,6 +162,7 @@ class AccountRecoverView extends React.Component {
                     );
                   }
                 }
+                
                 this.props.navigation.navigate('AccountPin', {
                   isWelcome: this.props.navigation.getParam('isWelcome'),
                   isNew: true

src/stores/AccountsStore.js

@@ -16,11 +16,10 @@
 
 // @flow
 
-import debounce from 'debounce';
 import { Container } from 'unstated';
 import { accountId, empty } from '../util/account';
 import { loadAccounts, saveAccount } from '../util/db';
-import { brainWalletAddress, decryptData, encryptData } from '../util/native';
+import { decryptData, encryptData } from '../util/native';
 
 export type Account = {
   name: string,
@@ -66,17 +65,7 @@ export default class AccountsStore extends Container<AccountsState> {
   }
 
   updateNew(accountUpdate: Object) {
-    Object.assign(this.state.newAccount, accountUpdate);
-    const { seed } = this.state.newAccount;
-    if (typeof seed === 'string') {
-      debounce(async () => {
-        const { bip39, address } = await brainWalletAddress(seed);
-
-        Object.assign(this.state.newAccount, { address, validBip39Seed: bip39 });
-        this.setState({});
-      }, 200)();
-    }
-    this.setState({});
+    this.setState({ newAccount : {...this.state.newAccount, ...accountUpdate} })
   }
 
   getNew(): Account {

src/util/debounce.js

+/**
+ * Creates and returns a new debounced version of the passed function that will 
+ * postpone its execution until after wait milliseconds have elapsed since 
+ * the last time it was invoked.
+ *
+ * @type  {T}                item    type
+ * @param {(any) => any}     function to debounce
+ * @param {number}           time in milliseconds
+ * 
+ *
+ * @return {any}            the debounced function
+ */
+export function debounce (fn, time) {
+  let timeout;
+
+  return function() {
+    const functionCall = () => fn.apply(this, arguments);
+
+    clearTimeout(timeout);
+    timeout = setTimeout(functionCall, time);
+  }
+}
\ No newline at end of file

yarn.lock

@@ -2191,7 +2191,7 @@ data-urls@^1.0.0:
     whatwg-mimetype "^2.2.0"
     whatwg-url "^7.0.0"
 
-debounce@^1.0.0, debounce@^1.2.0:
+debounce@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/debounce/-/debounce-1.2.0.tgz#44a540abc0ea9943018dc0eaa95cce87f65cd131"
   integrity sha512-mYtLl1xfZLi1m4RtQYlZgJUNQjl4ZxVnHzIR8nLLgi4q1YT8o/WM+MK/f8yfcc9s5Ir5zRaPZyZU6xs1Syoocg==