react-native-metamask-phrase-backup v1.0.3

react-native-metamask-phrase-backup

A simple and fully customizable React Native component that implements a metamask phrase backup.

• Fully customizable buttons and display selected value area

Metamask UI Example
:-------------------------:

React Native Metamask Phrase Backup Example	React Native Metamask Phrase Backup Example	React Native Metamask Phrase Backup Example

Installation

If using yarn:

yarn add react-native-metamask-phrase-backup

If using npm:

npm i react-native-metamask-phrase-backup

Usage

import { PhraseBackup } from 'react-native-metamask-phrase-backup';

Simply place a <PhraseBackup /> tag.

<View style={{flex: 1}}>
  <PhraseBackup data={data} onChange={onChangeSelectedValue}/>
</View>

Cusomize Display Selected Area

Cusomize display selected area is fully customizable using the isHaveDisplayValue, value props.

const data = ['relationship', 'thanksgiving', 'professional', 'organization', 'sporadically', 'intimidating', 'abolitionist', 'onomatopoeia', 'appreciation', 'annunciation', 'malnutrition', 'architecture'];
const [displayArr, setDisplayArr] = useState(Array.from({ length: 12 }, (_, i) => i + 1));
const [value, setValue] = useState(null);
const handleSelect = (value) => {
  setDisplayArr(value);
}

const result = () => {
  Alert.alert(
    'Complete Phrase Backup',
    displayArr.toString().replaceAll(',', ', '),
    [
      { text: 'Done' },
    ],
  )
}

return <View style={styles.container}>
  <Text style={[styles.description, { fontSize: 20 }]}>React Native Metamask Phrase Word Example</Text>
  <Text style={styles.description}>Select each word in the order it was presented to you.</Text>
  <View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center', flexWrap: 'wrap', marginBottom: 30 }}>
    {displayArr.map((item, index) => (
      <View key={index} style={[styles.displayItemContainer]}>
        <Text style={{ marginRight: 3 }}>{index + 1}.</Text>
        <TouchableOpacity
          style={typeof item === 'string' ? styles.displaySelectedButton : styles.displayButton}
          onPress={() => typeof item === 'string' && setValue(item)}
        >
          <Text style={styles.buttonText}>{typeof item === 'string' && item}</Text>
        </TouchableOpacity>
      </View>
    ))}
  </View>
  <PhraseBackup isHaveDisplayValue={false} data={data} seeds={12} onChange={handleSelect} value={value}/>
  <TouchableOpacity style={{ width: 320, height: 40, borderWidth: 1, borderColor: '#000', borderRadius: 18, marginTop: 20, alignItems: 'center', justifyContent: 'center' }} onPress={result}>
    <Text style={{ fontWeight: '500' }}>Complete Backup</Text>
  </TouchableOpacity>
</View>;

Documentation

Changelog

Version 1.0.2

• Allow show/hide display selected area and you can customize that area.
• Update README.md

Phrase Backup Component

Contributing

Pull requests are always welcome! Feel free to open a new GitHub issue for any changes that can be made.

Author

Huy Pham

License

MIT